import 'dart:convert';
import 'package:dio/dio.dart'; //接口请求库
import 'package:flutter/material.dart';
import 'package:flutter/services.dart' show rootBundle;
import 'package:web_socket_channel/web_socket_channel.dart';
import 'package:fluttertoast/fluttertoast.dart'; //提示框
import 'package:jovial_svg/jovial_svg.dart'; //svg
import 'package:flutter_svg/flutter_svg.dart'; //svg
// import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'package:flutter_bmflocation/flutter_bmflocation.dart';
// import 'package:flutter_bmfmap_example/CustomWidgets/map_appbar.dart';
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart'
    show BMFMapSDK, BMF_COORD_TYPE;
import 'package:flutter_baidu_mapapi_base/flutter_baidu_mapapi_base.dart';
import 'package:flutter_baidu_mapapi_map/flutter_baidu_mapapi_map.dart';
import 'dart:ui'; // 用于矩阵变换相关操作
// import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';
import 'package:matrix_gesture_detector/matrix_gesture_detector.dart';
// import 'package:vector_math/vector_math_64.dart'; // 引入 Vector3 类
import 'package:vector_math/vector_math_64.dart'
    as vector_math; // 为 vector_math 指定别名

enum ToastType { success, error, warn } //定义提示框的三种状态

void main() {
  // runApp(MyApp());
  runApp(LoginApp());
  // runApp(MapPage());
  // runApp(MapPage());
}
// void main() {
//   runApp(
//     MaterialApp(
//       home: MapPage(),
//     ),
//   );
// }

// 地图页面
class MapPage extends StatefulWidget {
  @override
  _MapPageState createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> {
  late BMFMapController _controller;
  late WebSocketChannel channel;
  List<dynamic> devices = [];
  List<dynamic> sfsList = [];
  int count = 0;
  int falsePortCount = 0;
  late Map<String, dynamic> data;

  @override
  void initState() {
    super.initState();
    // requestScreenData();
    connectWebSocket();
    _loadSfsList();

    BMFMapOptions mapOptions = BMFMapOptions(
      center: BMFCoordinate(31.3075695106019, 121.63043347578382),
      zoomLevel: 14,
      mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0),
    );
  }

  //结合原先的首页的接口

  void connectWebSocket() {
    channel = WebSocketChannel.connect(
      Uri.parse('ws://106.14.146.178:8090/online_clients'),
    );

    channel.stream.listen(
      (data) {
        print('Received: $data');
        setState(() {
          devices = jsonDecode(data);
          count = devices.length;
          falsePortCount =
              devices.where((device) => device['port'] == 'false').length;
          _updateDevices();
          devices.sort((a, b) => naturalCompare(a['name'], b['name']));

          // 打印最终的 devices 和 sfsList
          print('最终的 devices: $devices');
          print('最终的 sfsList: $sfsList');
        });
      },
      onError: (error) {
        print('Error: $error');
      },
      onDone: () {
        print('Connection closed');
      },
    );
  }

  Future<void> _loadSfsList() async {
    final contents = await rootBundle.loadString('assets/sfs_list.json');
    setState(() {
      sfsList = jsonDecode(contents);
    });
  }

  void _updateDevices() {
    final deviceIds =
        devices.map((device) => device['deviceId'].toString()).toSet();

    for (var sfsItem in sfsList) {
      var sfsItemId = sfsItem['ID'].toString();
      var sfsItemName = '${sfsItem['园区']} ${sfsItem['覆盖厂房']}';

      if (deviceIds.contains(sfsItemId)) {
        for (var device in devices) {
          if (device['deviceId'] == sfsItemId) {
            device['name'] = sfsItemName;
            break;
          }
        }
      } else {
        devices.add({
          'deviceId': sfsItem['ID'].toString(),
          'name': sfsItemName,
          'sn': '',
          'port': 'unknown',
          'status': '离线',
        });
      }
    }
  }

  void sendMessage(String sn, String version) {
    data = {"sn": sn, "type": version};
    final String jsonData = jsonEncode(data);
    if (channel != null && sn != null && data != null) {
      channel.sink.add(jsonData);
    }
  }

  int naturalCompare(String a, String b) {
    final regex = RegExp(r'(\d+)|(\D+)');
    final matchesA = regex.allMatches(a).map((m) => m.group(0)!).toList();
    final matchesB = regex.allMatches(b).map((m) => m.group(0)!).toList();

    for (var i = 0; i < matchesA.length && i < matchesB.length; i++) {
      final chunkA = matchesA[i];
      final chunkB = matchesB[i];

      final numA = int.tryParse(chunkA);
      final numB = int.tryParse(chunkB);

      if (numA != null && numB != null) {
        if (numA != numB) {
          return numA.compareTo(numB);
        }
      } else {
        final cmp = chunkA.compareTo(chunkB);
        if (cmp != 0) {
          return cmp;
        }
      }
    }

    return matchesA.length.compareTo(matchesB.length);
  }

  // 发起请求获取屏幕数据的函数
  void requestScreenData() async {
    print("触发requestScreenData方法了");
    Dio dio = Dio();
    try {
      final response = await dio.get(
          'https://hadoop01.rupeng119.com:8082/screen/screen/list?pageSize=40&pageNum=1&string=');
      if (response.statusCode == 200) {
        print("请求接口成功， ${response}");
        // 解析接口返回的数据
        Map<String, dynamic> data = response.data;
        List<dynamic> rows = data['rows'];
        // 在地图上添加标记
        print("点位信息， ${rows}");
        addMarkersToMap(rows);
      } else {
        print("请求接口失败，状态码: ${response.statusCode}");
      }
    } catch (e) {
      print("请求接口出现异常: $e");
    }
  }

  // 在地图上添加标记的函数
  void addMarkersToMap(List<dynamic> rows) {
    // 用于存储BMFMarker实例和对应的row信息之间的映射关系
    Map<BMFMarker, dynamic> markerRowMap = {};

    // 先创建一个列表来存储每个点位对应的BMFMarker实例
    List<BMFMarker> markerList = [];
    // 遍历数据数组，为每个点位添加标记到地图上
    rows.forEach((row) {
      String location = row['location'] ?? '未知';
      String longitudeLatitude = row['longitude'];
      List<String> coordinates = longitudeLatitude.split(',');
      double longitude = double.tryParse(coordinates[0]) ?? 0.0;
      double latitude = double.tryParse(coordinates[1]) ?? 0.0;

      // 创建地图标记
      BMFMarker marker = BMFMarker(
        position: BMFCoordinate(latitude, longitude),
        title: location,
        icon: 'assets/green.png',
        // 可以根据需要设置更多标记的属性，如图标等
      );
      print("点位信息:");
      print("地点名: ${marker.title}");
      print("经度: ${marker.position.longitude}");
      print("纬度: ${marker.position.latitude}");

      // 将创建好的marker实例添加到列表中
      markerList.add(marker);

      // 在映射关系中记录当前marker和对应的row
      markerRowMap[marker] = row;

      // 将标记添加到地图上（这里假设已经有地图控制器，即 _controller）
      _controller.addMarker(marker);

      // 创建文本
      BMFText bmfText = BMFText(
        text: location,
        position: BMFCoordinate(latitude, longitude), // 调整位置以避免与标记重叠
        // bgColor: Colors.blue.withOpacity(0.5), // 背景颜色
        fontColor: Colors.black, // 字体颜色
        fontSize: 23, // 字体大小
        typeFace: BMFTypeFace(
          familyName: BMFFamilyName.sMonospace,
          textStype: BMFTextStyle.BOLD,
        ),
        alignY: BMFVerticalAlign.ALIGN_TOP,
        alignX: BMFHorizontalAlign.ALIGN_LEFT,
        rotate: 0.0,
      );

      // 添加文本到地图
      _controller.addText(bmfText);
    });

    /// 地图marker点击回调
    _controller?.setMapClickedMarkerCallback(callback: (BMFMarker marker) {
      print(
          '点击了点位的位置：(${marker.position.latitude}, ${marker.position.longitude})');

      // 通过遍历markerList来找到与点击的marker实例相同的那个，然后获取对应的row信息并打印
      for (int i = 0; i < markerList.length; i++) {
        if (markerList[i] == marker) {
          dynamic row = markerRowMap[markerList[i]];
          print('该点位对应的row信息:');
          print('${row}');
          print('重要: ${row['deviceID']}');

          // // 查找 devices 中与点击的 row.deviceID 相同的项
          // dynamic clickedDevice = devices.firstWhere(
          //   (device) => device['deviceId'] == row['deviceID'],
          //   orElse: () => null,
          // );
          // if (clickedDevice != null) {
          //   print('对应的设备信息: $clickedDevice');
          // } else {
          //   print('没有找到对应的设备信息');
          // }

          // 查找 devices 中与点击的 row.deviceID 相同的项
          dynamic clickedDevice = devices.firstWhere(
            (device) =>
                device['deviceId'].toString() == row['deviceID'].toString(),
            orElse: () => null,
          );
          if (clickedDevice != null) {
            print('对应的设备信息: $clickedDevice');
          } else {
            print('没有找到对应的设备信息');
          }

          // 查找 sfsList 中与点击的 row.deviceID 相同的项
          dynamic clickedSfsItem = sfsList.firstWhere(
            (item) => item['ID'] == row['deviceID'],
            orElse: () => null,
          );
          if (clickedSfsItem != null) {
            print('对应的 SFS 信息: $clickedSfsItem');
          } else {
            print('没有找到对应的 SFS 信息');
          }

          // 跳转到 NewDetailPage 并传递参数
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => NewDetailPage(
                device: clickedDevice,
                sfsItem: clickedSfsItem,
                rowdata: row,
                sendMessage: sendMessage, // 确保 sendMessage 在当前上下文中可用
              ),
            ),
          );
          break;
        }
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    BMFMapOptions mapOptions = BMFMapOptions(
      center: BMFCoordinate(31.3075695106019, 121.63043347578382),
      zoomLevel: 14,
      mapPadding: BMFEdgeInsets(left: 30, top: 0, right: 30, bottom: 0),
    );

    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: BMFMapWidget(
          onBMFMapCreated: (controller) {
            // 将传入的地图控制器赋值给 _controller
            _controller = controller;
            // 可以在这里进行其他与地图控制器相关的初始化操作，比如设置地图的一些初始属性等
            requestScreenData(); // 在地图创建完成后请求数据
          },
          mapOptions: mapOptions,
        ),
      ),
    );
  }
}

//登录页面
class LoginApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '登录页面',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: LoginPage(),
    );
  }
}

class LoginPage extends StatelessWidget {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  // 显示自定义提示框的函数
  // void showCustomToast(BuildContext context, String message) {
  //   OverlayEntry overlayEntry;

  //   overlayEntry = OverlayEntry(
  //     builder: (context) => Positioned(
  //       top: 20,
  //       left: 0,
  //       right: 0,
  //       child: Material(
  //         color: Colors.transparent,
  //         child: Container(
  //           alignment: Alignment.center,
  //           child: Container(
  //             padding: EdgeInsets.all(16),
  //             decoration: BoxDecoration(
  //               color: Colors.red,
  //               borderRadius: BorderRadius.circular(8),
  //             ),
  //             child: Text(
  //               message,
  //               style: TextStyle(color: Colors.white),
  //             ),
  //           ),
  //         ),
  //       ),
  //     ),
  //   );

  //   Overlay.of(context).insert(overlayEntry);

  //   // 设置显示时长
  //   Future.delayed(Duration(seconds: 3), () {
  //     overlayEntry.remove();
  //   });
  // }

  // 显示自定义提示框的函数
  void showCustomToast(BuildContext context, String message, ToastType type) {
    Color backgroundColor;
    String iconPath;

    // 根据类型设置背景颜色和图标路径
    switch (type) {
      case ToastType.success:
        // backgroundColor = Colors.green;
        backgroundColor = Colors.white;
        iconPath = 'assets/success.png'; // 替换为成功图标路径
        break;
      case ToastType.error:
        // backgroundColor = Colors.red;
        backgroundColor = Colors.white;
        iconPath = 'assets/error.png'; // 替换为错误图标路径
        break;
      case ToastType.warn:
        // backgroundColor = Colors.orange;
        backgroundColor = Colors.white;
        iconPath = 'assets/warn.png'; // 替换为警告图标路径
        break;
    }

    OverlayEntry overlayEntry;

    overlayEntry = OverlayEntry(
      builder: (context) => Positioned(
        top: 20,
        left: 0,
        right: 0,
        child: Material(
          color: Colors.transparent,
          child: Container(
            alignment: Alignment.center,
            child: Container(
              padding: EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: backgroundColor,
                borderRadius: BorderRadius.circular(8),
              ),
              child: Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  Image.asset(
                    iconPath,
                    width: 24, // 图标宽度
                    height: 24, // 图标高度
                  ),
                  SizedBox(width: 8), // 图标和文本之间的间距
                  Text(
                    message,
                    // style: TextStyle(color: Colors.white),
                    style: TextStyle(color: Colors.black),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );

    Overlay.of(context).insert(overlayEntry);

    // 设置显示时长
    Future.delayed(Duration(seconds: 3), () {
      overlayEntry.remove();
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          color: Color(0xFFCD7FEF),
          image: DecorationImage(
            image: AssetImage('assets/bg.png'),
            fit: BoxFit.fill,
          ),
        ),
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset('assets/logo.png'),
              SizedBox(height: 60), // 调整间距为20
              Text(
                '第七感消防智慧屏',
                style: TextStyle(
                  fontSize: 24,
                  fontWeight: FontWeight.bold,
                  color: Colors.white,
                ),
              ),
              SizedBox(height: 20), // 调整间距为20
              // Text(
              //   '欢迎登录！',
              //   style: TextStyle(
              //     fontSize: 18,
              //     color: Colors.white,
              //   ),
              // ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Container(
                  width: 800,
                  alignment: Alignment.centerLeft, // 文本靠左对齐
                  child: Text(
                    '欢迎登录！',
                    style: TextStyle(
                      fontSize: 20,
                      color: Colors.white,
                    ),
                  ),
                ),
              ),
              SizedBox(height: 20),
              // Padding(
              //   padding: const EdgeInsets.symmetric(horizontal: 500),
              //   child: TextField(
              //     decoration: InputDecoration(
              //       hintText: '请输入用户名',
              //       hintStyle: TextStyle(color: Colors.white), // 设置提示文本颜色为白色
              //       filled: false, // 不填充背景
              //       // fillColor: Colors.white,
              //       fillColor: Colors.transparent,
              //       focusedBorder: UnderlineInputBorder(
              //         borderSide: BorderSide(color: Colors.white, width: 1.0),
              //       ),
              //       enabledBorder: UnderlineInputBorder(
              //         borderSide: BorderSide(color: Colors.white, width: 1.0),
              //       ),
              //     ),
              //     style: TextStyle(color: Colors.white),
              //     cursorColor: Colors.white, // 设置光标颜色为白色
              //   ),
              // ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: SizedBox(
                  width: 800, // 设置宽度为最大
                  child: TextField(
                    controller: usernameController, // 关联控制器
                    decoration: InputDecoration(
                      hintText: '请输入用户名',
                      hintStyle: TextStyle(color: Colors.white),
                      filled: false,
                      fillColor: Colors.transparent,
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1.0),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1.0),
                      ),
                    ),
                    style: TextStyle(color: Colors.white),
                    cursorColor: Colors.white,
                  ),
                ),
              ),
              SizedBox(height: 30),
              // Padding(
              //   padding: const EdgeInsets.symmetric(horizontal: 500),
              //   child: TextField(
              //     obscureText: true,
              //     decoration: InputDecoration(
              //       hintText: '请输入密码',
              //       hintStyle: TextStyle(color: Colors.white), // 设置提示文本颜色为白色
              //       filled: false, // 不填充背景
              //       // fillColor: Colors.white,
              //       fillColor: Colors.transparent,
              //       focusedBorder: UnderlineInputBorder(
              //         borderSide: BorderSide(color: Colors.white, width: 1.0),
              //       ),
              //       enabledBorder: UnderlineInputBorder(
              //         borderSide: BorderSide(color: Colors.white, width: 1.0),
              //       ),
              //     ),
              //     style: TextStyle(color: Colors.white),
              //     cursorColor: Colors.white, // 设置光标颜色为白色
              //   ),
              // ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: SizedBox(
                  width: 800, // 设置宽度为最大
                  child: TextField(
                    controller: passwordController, // 关联控制器
                    decoration: InputDecoration(
                      hintText: '请输入密码',
                      hintStyle: TextStyle(color: Colors.white),
                      filled: false,
                      fillColor: Colors.transparent,
                      focusedBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1.0),
                      ),
                      enabledBorder: UnderlineInputBorder(
                        borderSide: BorderSide(color: Colors.white, width: 1.0),
                      ),
                    ),
                    style: TextStyle(color: Colors.white),
                    cursorColor: Colors.white,
                  ),
                ),
              ),
              SizedBox(height: 30),
              // ElevatedButton(
              //   onPressed: () {
              //     // 调用登录接口
              //     // 如果登录成功，跳转到MyHomePage
              //     Navigator.push(
              //       context,
              //       MaterialPageRoute(
              //           builder: (context) => MyHomePage(title: '在线')),
              //     );
              //   },
              //   child: Text('登录'),
              // ),
              Padding(
                padding: const EdgeInsets.symmetric(horizontal: 20),
                child: Container(
                  width: 800, // 设置按钮宽度为800
                  height: 40, // 设置按钮高度为40
                  // child: ElevatedButton(
                  //   onPressed: () {
                  //     // 调用登录接口
                  //     // 如果登录成功，跳转到MyHomePage
                  //     Navigator.push(
                  //       context,
                  //       MaterialPageRoute(
                  //           builder: (context) => MyHomePage(title: '在线')),
                  //     );
                  //   },
                  //   child: Text('登录'),
                  // ),
                  child: ElevatedButton(
                    onPressed: () async {
                      Dio dio = Dio();
                      try {
                        // 获取输入框的值
                        String username = usernameController.text;
                        String password = passwordController.text;
                        // 调用登录接口
                        final response = await dio.post(
                          'https://hadoop01.rupeng119.com:8082/auth/login', // 替换为你的登录接口URL
                          data: {
                            'username': username, // 替换为实际的用户名
                            'password': password, // 替换为实际的密码
                            'code': "0000",
                          },
                        );

                        if (response.statusCode == 200 &&
                            response.data['msg'] == null) {
                          // 如果服务器返回200，表示登录成功
                          print("登录成功了");
                          // Navigator.push(
                          //   context,
                          //   MaterialPageRoute(
                          //       builder: (context) => MyHomePage(title: '在线')),
                          // );
                          // 跳转到地图页面
                          Navigator.pushReplacement(
                            context,
                            MaterialPageRoute(builder: (context) => MapPage()),
                          );
                        } else {
                          // 如果登录失败，显示错误信息
                          print("登录失败了");
                          final errorMessage =
                              response.data['msg'] ?? '登录失败'; // 获取msg字段
                          print("错误信息: $errorMessage"); // 打印错误信息
                          // ScaffoldMessenger.of(context).showSnackBar(
                          //   SnackBar(
                          //     content: Text(errorMessage),
                          //     duration: Duration(seconds: 3), // 提示框显示时长
                          //   ),
                          // );
                          // Fluttertoast.showToast(
                          //   msg: errorMessage,
                          //   toastLength: Toast.LENGTH_SHORT,
                          //   gravity: ToastGravity.TOP, // 显示在顶部
                          //   backgroundColor: Colors.red,
                          //   textColor: Colors.white,
                          //   fontSize: 16.0,
                          // );
                          // Fluttertoast.showToast(
                          //   msg: errorMessage,
                          //   toastLength: Toast.LENGTH_LONG, // 显示时长较长
                          //   gravity: ToastGravity.TOP, // 显示在顶部正中间
                          //   timeInSecForIosWeb: 5, // 设置iOS和Web平台的显示时间
                          //   backgroundColor: Colors.red, // 背景颜色为红色
                          //   textColor: Colors.white, // 文字颜色为白色
                          //   fontSize: 16.0,
                          // );
                          showCustomToast(
                              context, errorMessage, ToastType.error);
                        }
                      } catch (e) {
                        // 捕获异常并显示错误信息
                        ScaffoldMessenger.of(context).showSnackBar(
                          SnackBar(content: Text('请求失败: $e')),
                        );
                      }
                    },
                    child: Text('登录'),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

//原先地图页面和设备详情页面的代码
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: '第七感消防智慧屏运维APP',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: '在线'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late WebSocketChannel channel;
  List<dynamic> devices = [];
  List<dynamic> sfsList = [];
  int count = 0;
  int falsePortCount = 0;
  late Map<String, dynamic> data;
  @override
  void initState() {
    super.initState();
    _loadSfsList();
    channel = WebSocketChannel.connect(
        Uri.parse('ws://106.14.146.178:8090/online_clients'));
    // print("收到websocket数据:${data}");
    if (channel != null) {
      print("连接成功");
      channel!.stream.listen(
        (data) {
          print('Received: $data');
          // 处理接收到的消息
          setState(() {
            print("收到websocket数据:${data}");
            devices = jsonDecode(data);
            count = devices.length;

            falsePortCount =
                devices.where((device) => device['port'] == 'false').length;
            _updateDevices();
            devices.sort((a, b) => naturalCompare(a['name'], b['name']));
          });
        },
        onError: (error) {
          print('Error: $error');
          //      _scheduleReconnect();
        },
        onDone: () {
          print('连接关闭');
          //    _scheduleReconnect();
        },
      );
    } else {
      print("连接失败");
    }
  }

  Future<void> _loadSfsList() async {
    final contents = await rootBundle.loadString('assets/sfs_list.json');
    setState(() {
      sfsList = jsonDecode(contents);
    });
  }

  void _updateDevices() {
    final sfsDeviceIds = sfsList.map((item) => item['ID'].toString()).toSet();
    final deviceIds =
        devices.map((device) => device['deviceId'].toString()).toSet();
    // print("sfsDeviceIds:$sfsDeviceIds ");
    //print("deviceIds:$deviceIds");
    for (var sfsItem in sfsList) {
      var sfsItemId = sfsItem['ID'].toString();
      var sfsItemName = '${sfsItem['园区']} ${sfsItem['覆盖厂房']}';

      if (deviceIds.contains(sfsItemId)) {
        // 更新已有设备的 name 字段
        for (var device in devices) {
          if (device['deviceId'] == sfsItemId) {
            device['name'] = sfsItemName;
            break;
          }
        }
      } else {
        devices.add({
          'deviceId': sfsItem['ID'].toString(),
          'name': '${sfsItem['园区']} ${sfsItem['覆盖厂房']}',
          'sn': '',
          'port': 'unknown',
          'status': '离线',
        });
      }
    }
  }

  @override
  void dispose() {
    channel.sink.close();
    super.dispose();
  }

  void sendMessage(String sn, String version) {
    data = {"sn": sn, "type": version};

    final String jsonData = jsonEncode(data);
    if ((channel != null) && (sn != null) && (data != null)) {
      channel!.sink.add(jsonData);
    }
  }

  int naturalCompare(String a, String b) {
    final regex = RegExp(r'(\d+)|(\D+)');
    final matchesA = regex.allMatches(a).map((m) => m.group(0)!).toList();
    final matchesB = regex.allMatches(b).map((m) => m.group(0)!).toList();

    for (var i = 0; i < matchesA.length && i < matchesB.length; i++) {
      final chunkA = matchesA[i];
      final chunkB = matchesB[i];

      final numA = int.tryParse(chunkA);
      final numB = int.tryParse(chunkB);

      if (numA != null && numB != null) {
        if (numA != numB) {
          return numA.compareTo(numB);
        }
      } else {
        final cmp = chunkA.compareTo(chunkB);
        if (cmp != 0) {
          return cmp;
        }
      }
    }

    return matchesA.length.compareTo(matchesB.length);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title + "  $count/29，串口故障$falsePortCount/29"),
      ),
      body: Center(
        child: devices.isEmpty
            ? const CircularProgressIndicator()
            : ListView.builder(
                itemCount: devices.length,
                itemBuilder: (context, index) {
                  var device = devices[index];
                  bool isOffline = device['status'] == '离线';
                  var sfsItem = sfsList.firstWhere(
                      (item) =>
                          item['ID'].toString() ==
                          device['deviceId'].toString(),
                      orElse: () => null);

                  return ListTile(
                    leading: Text(
                      '${index + 1}',
                      style: TextStyle(
                        fontSize: 30,
                        color: isOffline ? Colors.red : Colors.black,
                      ),
                    ),
                    title: Text(
                      device['name'],
                      style: TextStyle(
                        color: isOffline ? Colors.red : Colors.black,
                      ),
                    ),
                    subtitle: Text.rich(
                      TextSpan(
                        children: [
                          TextSpan(
                            text: 'ID: ${device['deviceId']}  - 串口: ',
                            style: TextStyle(
                              color: isOffline ? Colors.red : Colors.black,
                            ),
                          ),
                          TextSpan(
                            text: device['port'] == 'false'
                                ? '异常'
                                : device['port'] == 'true'
                                    ? '正常'
                                    : '未知',
                            style: TextStyle(
                              color: device['port'] == 'false'
                                  ? Colors.red
                                  : device['port'] == 'true'
                                      ? Colors.green
                                      : Colors.grey,
                            ),
                          ),
                        ],
                      ),
                    ),
                    trailing: Text(
                      device['status'] == 'online' ? "在线" : "离线",
                      style: TextStyle(
                        color: isOffline ? Colors.red : Colors.black,
                      ),
                    ),
                    onTap: () {
                      //跳转到设备详情页
                      // Navigator.push(
                      //   context,
                      //   MaterialPageRoute(
                      //     builder: (context) => DeviceDetailPage(
                      //         device: device,
                      //         sfsItem: sfsItem,
                      //         sendMessage: sendMessage),
                      //   ),
                      // );
                      //跳转到详情页(这个是对的)
                      // Navigator.push(
                      //   context,
                      //   MaterialPageRoute(
                      //     builder: (context) => NewDetailPage(
                      //       device: device,
                      //       sfsItem: sfsItem,
                      //       sendMessage: sendMessage,
                      //     ),
                      //   ),
                      // );
                    },
                  );
                },
              ),
      ),
    );
  }
}

class DeviceDetailPage extends StatefulWidget {
  final Map<String, dynamic> device;
  final Map<String, dynamic>? sfsItem;
  final Function(String, String) sendMessage;

  DeviceDetailPage(
      {required this.device, this.sfsItem, required this.sendMessage});

  @override
  _DeviceDetailPageState createState() => _DeviceDetailPageState();
}

class _DeviceDetailPageState extends State<DeviceDetailPage> {
  String appVersion = "1.0.0";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('设备详情11'),
      ),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            _buildDetailCard('设备信息', [
              _buildDetailRow('设备ID', widget.device['deviceId']),
              _buildDetailRow('SN', widget.device['sn']),
              _buildDetailRow(
                  '状态', widget.device['status'] == 'online' ? "在线" : "离线"),
              _buildDetailRow(
                  '串口状态',
                  widget.device['port'] == 'false'
                      ? '异常'
                      : widget.device['port'] == 'true'
                          ? '正常'
                          : '未知'),
            ]),
            if (widget.sfsItem != null)
              _buildDetailCard('SFS 信息', [
                _buildDetailRow('园区', widget.sfsItem!['园区']),
                _buildDetailRow('覆盖厂房', widget.sfsItem!['覆盖厂房']),
                _buildDetailRow('主机型号', widget.sfsItem!['主机型号']),
                _buildDetailRow('主机位置', widget.sfsItem!['主机位置']),
                _buildDetailRow('备注', widget.sfsItem!['备注']),
                _buildDetailRow('批次', widget.sfsItem!['批次']),
              ]),
            SizedBox(height: 16),
            _buildActionButton('得到APP版本', () {
              widget.sendMessage(widget.device['sn'], 'GetVersion');
              setState(() {
                appVersion = "1.0.1";
                _buildDetailRow('当前智慧屏APP版本', appVersion);
              });
            }),
            _buildActionButton('更新APP', () {
              // 更新APP逻辑
              widget.sendMessage(widget.device['sn'], 'UpdateAPP');
            }),
            _buildActionButton('重新启动', () {
              // 重新启动逻辑
              widget.sendMessage(widget.device['sn'], 'Restart');
            }),
          ],
        ),
      ),
    );
  }

  Widget _buildDetailCard(String title, List<Widget> children) {
    return Card(
      margin: const EdgeInsets.symmetric(vertical: 8.0),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(title,
                style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
            SizedBox(height: 8),
            ...children,
          ],
        ),
      ),
    );
  }

  Widget _buildDetailRow(String label, String value) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 4.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(label,
              style: TextStyle(fontSize: 16, fontWeight: FontWeight.w500)),
          Text(value, style: TextStyle(fontSize: 16)),
        ],
      ),
    );
  }

  Widget _buildActionButton(String label, VoidCallback onPressed) {
    return Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0),
      child: ElevatedButton(
        onPressed: onPressed,
        child: Text(label),
        style: ElevatedButton.styleFrom(
          padding: const EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
          textStyle: TextStyle(fontSize: 16),
        ),
      ),
    );
  }
}

//详情页 我自己写的第一版

// class NewDetailPage extends StatelessWidget {
//   final Map<String, dynamic> device;
//   final Map<String, dynamic>? sfsItem;
//   final dynamic rowdata; // 添加 rowdata 参数
//   final Function(String, String) sendMessage;

//   NewDetailPage({
//     required this.device,
//     this.sfsItem,
//     required this.rowdata,
//     required this.sendMessage,
//   });

//   @override
//   Widget build(BuildContext context) {
//     // 打印传递过来的参数
//     print("Device: $device");
//     print("SFS Item: $sfsItem");
//     print('Row 数据: $rowdata');

//     // return Scaffold(
//     //   body: Column(
//     //     children: [
//     //       Container(
//     //         height: MediaQuery.of(context).size.height * 0.2, // 上部分占页面高度的十分之二
//     //         color: Color(0xFFECE9EF), // 上部分背景颜色
//     //         child: Column(
//     //           mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
//     //           children: [
//     //             // 第一行内容
//     //             Center(
//     //               child: Container(
//     //                 width: MediaQuery.of(context).size.width *
//     //                     0.95, // 容器宽度为上面区域宽度的95%
//     //                 height: 51,
//     //                 decoration: BoxDecoration(
//     //                   boxShadow: [
//     //                     BoxShadow(
//     //                       color: Color(0xFF644379),
//     //                       blurRadius: 5,
//     //                       offset: Offset(0, 0), // 0 0px 5px
//     //                     ),
//     //                   ],
//     //                   borderRadius: BorderRadius.circular(10),
//     //                   color: Color(0xFFC4BCCB), // 容器背景颜色
//     //                 ),
//     //                 child: Row(
//     //                   mainAxisAlignment:
//     //                       MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
//     //                   crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中
//     //                   children: [
//     //                     // 第一组数据
//     //                     Container(
//     //                       alignment: Alignment.centerLeft,
//     //                       padding:
//     //                           EdgeInsets.symmetric(horizontal: 30), // 左右内边距
//     //                       height: 60, // 设置高度以便于垂直居中
//     //                       decoration: BoxDecoration(
//     //                         borderRadius: BorderRadius.circular(10),
//     //                         gradient: LinearGradient(
//     //                           colors: [
//     //                             Color(0xFFA94FAE),
//     //                             Color(0xFF644379),
//     //                           ],
//     //                           begin: Alignment.centerLeft,
//     //                           end: Alignment.centerRight,
//     //                         ),
//     //                         boxShadow: [
//     //                           BoxShadow(
//     //                             color: Color(0xFF644379),
//     //                             blurRadius: 5,
//     //                             offset: Offset(0, 0), // 0 0px 5px
//     //                           ),
//     //                         ],
//     //                       ),
//     //                       child: Text(
//     //                         '${sfsItem?['园区']} ${sfsItem?['覆盖厂房']}',
//     //                         style: TextStyle(
//     //                           fontSize: 22, // 字体大小
//     //                           color: Colors.white, // 字体颜色
//     //                           height: 1.0, // 行高
//     //                         ),
//     //                       ),
//     //                     ),
//     //                     // 第二组数据
//     //                     Container(
//     //                       alignment: Alignment.center,
//     //                       child: Column(
//     //                         crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
//     //                         mainAxisAlignment: MainAxisAlignment.center,
//     //                         children: [
//     //                           Text(
//     //                             '主机型号: ${sfsItem?['主机型号']}',
//     //                             style: TextStyle(fontSize: 16),
//     //                           ),
//     //                           Text(
//     //                             '主机位置: ${sfsItem?['主机位置']}',
//     //                             style: TextStyle(fontSize: 16),
//     //                           ),
//     //                         ],
//     //                       ),
//     //                     ),
//     //                     // 第三组数据
//     //                     Container(
//     //                       alignment: Alignment.center,
//     //                       child: Column(
//     //                         crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
//     //                         mainAxisAlignment: MainAxisAlignment.center,
//     //                         children: [
//     //                           Text(
//     //                             '备注: ${sfsItem?['备注']}',
//     //                             style: TextStyle(fontSize: 16),
//     //                           ),
//     //                           Text(
//     //                             '批次: ${sfsItem?['批次']}',
//     //                             style: TextStyle(fontSize: 16),
//     //                           ),
//     //                         ],
//     //                       ),
//     //                     ),
//     //                     // 第四组数据（返回按钮）
//     //                     GestureDetector(
//     //                       onTap: () {
//     //                         Navigator.pop(context); // 点击图片返回上一个页面
//     //                       },
//     //                       child: Container(
//     //                         width: 40,
//     //                         height: 40,
//     //                         decoration: BoxDecoration(
//     //                           image: DecorationImage(
//     //                             image: AssetImage(
//     //                                 'assets/home.png'), // 替换为你的返回图标路径
//     //                             fit: BoxFit.cover,
//     //                           ),
//     //                         ),
//     //                       ),
//     //                     ),
//     //                   ],
//     //                 ),
//     //               ),
//     //             ),
//     //             SizedBox(height: 14), // 添加间隔，高度为10
//     //             // 第二行内容
//     //             Container(
//     //               width: MediaQuery.of(context).size.width *
//     //                   0.95, // 容器宽度为上面区域宽度的95%
//     //               padding: EdgeInsets.symmetric(vertical: 10), // 上下内边距
//     //               child: Row(
//     //                 mainAxisAlignment:
//     //                     MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
//     //                 children: [
//     //                   // 新增的七组数据
//     //                   _buildDataBox(
//     //                       '设备ID', device['deviceId'], Color(0xFF1890FF)),
//     //                   _buildDataBox('SN', device['sn'], Color(0xFF1890FF)),
//     //                   _buildStatusBox('状态', device['status']),
//     //                   _buildPortBox('串口状态', device['port']),
//     //                   _buildActionButton('获取APP版本', () {
//     //                     // 获取APP版本的功能
//     //                     sendMessage(device['sn'], 'GetVersion');
//     //                   }),
//     //                   _buildActionButton('更新APP', () {
//     //                     // 更新APP的功能
//     //                     sendMessage(device['sn'], 'UpdateAPP');
//     //                   }),
//     //                   _buildActionButton('重新启动', () {
//     //                     // 重新启动的功能
//     //                     sendMessage(device['sn'], 'Restart');
//     //                   }),
//     //                 ],
//     //               ),
//     //             ),
//     //           ],
//     //         ),
//     //       ),
//     //       // Container(
//     //       //   height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
//     //       //   color: Colors.white, // 下部分背景颜色
//     //       //   child: Center(
//     //       //     child: Text(
//     //       //       '设备详情内容',
//     //       //       style: TextStyle(fontSize: 18),
//     //       //     ),
//     //       //   ),
//     //       // ),
//     //       // Container(
//     //       //   height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
//     //       //   color: Colors.white, // 下部分背景颜色
//     //       //   child: Center(
//     //       //     child: SvgPicture.asset(
//     //       //       'assets/2# 5#.svg', // 替换为你的SVG图像路径
//     //       //       height: 200, // 设置SVG图像高度
//     //       //       width: 200, // 设置SVG图像宽度
//     //       //       fit: BoxFit.contain, // 适应容器
//     //       //     ),
//     //       //   ),
//     //       // ),
//     //       Container(
//     //         height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
//     //         color: Colors.white, // 下部分背景颜色
//     //         child: Center(
//     //           child: SvgPicture.asset(
//     //             'test9.svg', // 替换为你的SVG图像路径
//     //             height: 600, // 设置SVG图像高度
//     //             width: 600, // 设置SVG图像宽度
//     //             // fit: BoxFit.contain, // 适应容器
//     //           ),
//     //         ),
//     //       ),
//     //     ],
//     //   ),
//     // );

//     return Scaffold(
//       body: SafeArea(
//         child: SingleChildScrollView(
//           child: Column(
//             children: [
//               Container(
//                 height:
//                     MediaQuery.of(context).size.height * 0.3, // 上部分占页面高度的十分之二
//                 color: Color(0xFFECE9EF), // 上部分背景颜色
//                 child: Column(
//                   mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
//                   children: [
//                     // 第一行内容
//                     Center(
//                       child: Container(
//                         width: MediaQuery.of(context).size.width *
//                             0.95, // 容器宽度为上面区域宽度的95%
//                         height: 51,
//                         decoration: BoxDecoration(
//                           boxShadow: [
//                             BoxShadow(
//                               color: Color(0xFF644379),
//                               blurRadius: 5,
//                               offset: Offset(0, 0), // 0 0px 5px
//                             ),
//                           ],
//                           borderRadius: BorderRadius.circular(10),
//                           color: Color(0xFFC4BCCB), // 容器背景颜色
//                         ),
//                         child: Row(
//                           mainAxisAlignment:
//                               MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
//                           crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中
//                           children: [
//                             // 第一组数据
//                             Container(
//                               alignment: Alignment.centerLeft,
//                               padding:
//                                   EdgeInsets.symmetric(horizontal: 30), // 左右内边距
//                               height: 60, // 设置高度以便于垂直居中
//                               decoration: BoxDecoration(
//                                 borderRadius: BorderRadius.circular(10),
//                                 gradient: LinearGradient(
//                                   colors: [
//                                     Color(0xFFA94FAE),
//                                     Color(0xFF644379),
//                                   ],
//                                   begin: Alignment.centerLeft,
//                                   end: Alignment.centerRight,
//                                 ),
//                                 boxShadow: [
//                                   BoxShadow(
//                                     color: Color(0xFF644379),
//                                     blurRadius: 5,
//                                     offset: Offset(0, 0), // 0 0px 5px
//                                   ),
//                                 ],
//                               ),
//                               child: Text(
//                                 '${sfsItem?['园区']} ${sfsItem?['覆盖厂房']}',
//                                 style: TextStyle(
//                                   fontSize: 22, // 字体大小
//                                   color: Colors.white, // 字体颜色
//                                   height: 1.0, // 行高
//                                 ),
//                               ),
//                             ),
//                             // 第二组数据
//                             Container(
//                               alignment: Alignment.center,
//                               child: Column(
//                                 crossAxisAlignment:
//                                     CrossAxisAlignment.start, // 左对齐
//                                 mainAxisAlignment: MainAxisAlignment.center,
//                                 children: [
//                                   Text(
//                                     '主机型号: ${sfsItem?['主机型号']}',
//                                     style: TextStyle(fontSize: 16),
//                                   ),
//                                   Text(
//                                     '主机位置: ${sfsItem?['主机位置']}',
//                                     style: TextStyle(fontSize: 16),
//                                   ),
//                                 ],
//                               ),
//                             ),
//                             // 第三组数据
//                             Container(
//                               alignment: Alignment.center,
//                               child: Column(
//                                 crossAxisAlignment:
//                                     CrossAxisAlignment.start, // 左对齐
//                                 mainAxisAlignment: MainAxisAlignment.center,
//                                 children: [
//                                   Text(
//                                     '备注: ${sfsItem?['备注']}',
//                                     style: TextStyle(fontSize: 16),
//                                   ),
//                                   Text(
//                                     '批次: ${sfsItem?['批次']}',
//                                     style: TextStyle(fontSize: 16),
//                                   ),
//                                 ],
//                               ),
//                             ),
//                             // 第四组数据（返回按钮）
//                             GestureDetector(
//                               onTap: () {
//                                 Navigator.pop(context); // 点击图片返回上一个页面
//                               },
//                               child: Container(
//                                 width: 40,
//                                 height: 40,
//                                 decoration: BoxDecoration(
//                                   image: DecorationImage(
//                                     image: AssetImage(
//                                         'assets/home.png'), // 替换为你的返回图标路径
//                                     fit: BoxFit.cover,
//                                   ),
//                                 ),
//                               ),
//                             ),
//                           ],
//                         ),
//                       ),
//                     ),
//                     SizedBox(height: 14), // 添加间隔，高度为10
//                     // 第二行内容
//                     Container(
//                       width: MediaQuery.of(context).size.width *
//                           0.95, // 容器宽度为上面区域宽度的95%
//                       padding: EdgeInsets.symmetric(vertical: 10), // 上下内边距
//                       child: Row(
//                         mainAxisAlignment:
//                             MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
//                         children: [
//                           // 新增的七组数据
//                           _buildDataBox(
//                               '设备ID', device['deviceId'], Color(0xFF1890FF)),
//                           _buildDataBox('SN', device['sn'], Color(0xFF1890FF)),
//                           _buildStatusBox('状态', device['status']),
//                           _buildPortBox('串口状态', device['port']),
//                           _buildActionButton('获取APP版本', () {
//                             // 获取APP版本的功能
//                             sendMessage(device['sn'], 'GetVersion');
//                           }),
//                           _buildActionButton('更新APP', () {
//                             // 更新APP的功能
//                             sendMessage(device['sn'], 'UpdateAPP');
//                           }),
//                           _buildActionButton('重新启动', () {
//                             // 重新启动的功能
//                             sendMessage(device['sn'], 'Restart');
//                           }),
//                         ],
//                       ),
//                     ),
//                   ],
//                 ),
//               ),
//               // Container(
//               //   height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
//               //   color: Colors.white, // 下部分背景颜色
//               //   child: Center(
//               //     child: Text(
//               //       '设备详情内容',
//               //       style: TextStyle(fontSize: 18),
//               //     ),
//               //   ),
//               // ),
//               // Container(
//               //   height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
//               //   color: Colors.white, // 下部分背景颜色
//               //   child: Center(
//               //     child: SvgPicture.asset(
//               //       'assets/2# 5#.svg', // 替换为你的SVG图像路径
//               //       height: 200, // 设置SVG图像高度
//               //       width: 200, // 设置SVG图像宽度
//               //       fit: BoxFit.contain, // 适应容器
//               //     ),
//               //   ),
//               // ),
//               Container(
//                 height:
//                     MediaQuery.of(context).size.height * 0.7, // 下部分占页面剩余的十分之八
//                 color: Colors.white, // 下部分背景颜色
//                 child: Center(
//                   // child: SvgPicture.asset(
//                   //   'assets/test7.svg', // 替换为你的SVG图像路径，如果是平板 /assets/test7.svg
//                   //   height: 600, // 设置SVG图像高度
//                   //   width: 600, // 设置SVG图像宽度
//                   //   // fit: BoxFit.contain, // 适应容器
//                   //   cacheColorFilter: false,
//                   // ),
//                   //fromSvgHttpUrl 这个方法主要是用于加载网络上的 SVG 资源的
//                   //如果使用SvgPicture.asset要求svg图片的源码里面不能有style标签
//                   // child: ScalableImageWidget.fromSISource(
//                   //   si: ScalableImageSource.fromSvgHttpUrl(Uri.parse(
//                   //       'https://hujingyu.rupeng119.com:8005/monitor/2023/09/21/1厂房园区_20230921022611A848.svg')),
//                   // ),
//                   child: SizedBox(
//                     width: 600,
//                     height: 600,
//                     child: ScalableImageWidget.fromSISource(
//                       si: ScalableImageSource.fromSvgHttpUrl(Uri.parse(
//                           'https://hujingyu.rupeng119.com:8005/monitor/2023/09/21/1厂房园区_20230921022611A848.svg')),
//                     ),
//                   ),
//                 ),
//               ),
//             ],
//           ),
//         ),
//       ),
//     );
//   }

//   // 构建数据框
//   Widget _buildDataBox(String title, String? value, Color backgroundColor) {
//     return Column(
//       children: [
//         Text(
//           title,
//           style: TextStyle(fontSize: 16),
//         ),
//         Container(
//           // width: 60,
//           constraints: BoxConstraints(
//             minWidth: 60, // 设置最小宽度为60
//           ),
//           // padding: EdgeInsets.symmetric(vertical: 20),//设置上下padding
//           padding: EdgeInsets.all(8), // 设置上下左右的padding为10
//           decoration: BoxDecoration(
//             color: backgroundColor,
//             borderRadius: BorderRadius.circular(16),
//           ),
//           child: Center(
//             child: Text(
//               value ?? '',
//               style: TextStyle(fontSize: 16, color: Colors.white),
//             ),
//           ),
//         ),
//       ],
//     );
//   }

//   // 构建状态框
//   Widget _buildStatusBox(String title, String status) {
//     Color backgroundColor = status == 'online' ? Color(0xFFffaa00) : Colors.red;
//     String displayStatus = status == 'online' ? '在线' : '离线';

//     return Column(
//       children: [
//         Text(
//           title,
//           style: TextStyle(fontSize: 16),
//         ),
//         Container(
//           width: 60,
//           padding: EdgeInsets.symmetric(vertical: 5),
//           decoration: BoxDecoration(
//             color: backgroundColor,
//             borderRadius: BorderRadius.circular(14),
//           ),
//           child: Center(
//             child: Text(
//               displayStatus,
//               style: TextStyle(fontSize: 16, color: Colors.white),
//             ),
//           ),
//         ),
//       ],
//     );
//   }

//   // 构建串口状态框
//   Widget _buildPortBox(String title, String portStatus) {
//     Color backgroundColor =
//         portStatus == 'true' ? Color(0xFFffaa00) : Colors.red;
//     String displayPort = portStatus == 'true' ? '正常' : '异常';

//     return Column(
//       children: [
//         Text(
//           title,
//           style: TextStyle(fontSize: 16),
//         ),
//         Container(
//           width: 60,
//           padding: EdgeInsets.symmetric(vertical: 5),
//           decoration: BoxDecoration(
//             color: backgroundColor,
//             borderRadius: BorderRadius.circular(14),
//           ),
//           child: Center(
//             child: Text(
//               displayPort,
//               style: TextStyle(fontSize: 16, color: Colors.white),
//             ),
//           ),
//         ),
//       ],
//     );
//   }

//   // 构建操作按钮
//   Widget _buildActionButton(String title, VoidCallback onPressed) {
//     return ElevatedButton(
//       onPressed: onPressed,
//       style: ElevatedButton.styleFrom(
//         backgroundColor: Color(0xFF1890FF), // 设置背景颜色
//         shape: RoundedRectangleBorder(
//           borderRadius: BorderRadius.circular(14),
//         ),
//       ),
//       child: Container(
//         // width: 60,
//         constraints: BoxConstraints(
//           minWidth: 60, // 设置最小宽度为60
//         ),
//         padding: EdgeInsets.symmetric(vertical: 5),
//         child: Center(
//           child: Text(
//             title,
//             style: TextStyle(fontSize: 16, color: Colors.white),
//           ),
//         ),
//       ),
//     );
//   }
// }

//自己写的第二版详情页

class NewDetailPage extends StatefulWidget {
  final Map<String, dynamic> device;
  final Map<String, dynamic>? sfsItem;
  final dynamic rowdata; // 添加 rowdata 参数
  final Function(String, String) sendMessage;

  NewDetailPage({
    required this.device,
    this.sfsItem,
    required this.rowdata,
    required this.sendMessage,
  });

  @override
  _NewDetailPageState createState() => _NewDetailPageState();
}

class _NewDetailPageState extends State<NewDetailPage> {
  String selectedItem = '';
  String? _expandedChild; // 存储当前展开的二级标签
  String? selectedDescription; // 存储选中项的描述信息
  List<Map<String, dynamic>> apiData = []; // 存储构建的数据结构
  List<dynamic> pointData = []; // 存储点位信息
  // 用于控制缩放
  double _scale = 1.0;
  // double _scale = 0.4;

  // 用于记录平移的x坐标
  double _translateX = 0;
  // 用于记录平移的y坐标
  double _translateY = 0;
  // 变换控制器
  final TransformationController _transformationController =
      TransformationController();
  double initialScaledWidth = 0.0;
  double initialScaledHeight = 0.0;
  final Dio _dio = Dio(); // 创建 Dio 实例
  double _minScale = 0.1;
  double _maxScale = 3.0;

  bool isFirstLoadPointData = true; // 添加这个变量，初始化为 true，表示首次加载

  Map<String, double> lastXCoords = {}; // 存储每个点位上次更新后的 x 坐标值
  Map<String, double> lastYCoords = {}; // 存储每个点位上次更新后的 y 坐标值

  // 将matrixNotifier定义在此处作为成员变量初始化，并添加初始值打印
  final ValueNotifier<Matrix4> matrixNotifier =
      ValueNotifier(Matrix4.identity());
  ValueNotifier<double> scaledWidthNotifier = ValueNotifier(0.0);
  ValueNotifier<double> scaledHeightNotifier = ValueNotifier(0.0);

  @override
  void initState() {
    super.initState();
    print(
        'Initial matrixNotifier value: ${matrixNotifier.value}'); // 在initState中也可以再次打印确认
    print('创建的引用地址: ${matrixNotifier.hashCode}');
    // 初始化时构建数据结构
    buildDataStructure();
  }

  void _updateSize() {
    setState(() {
      print("调用这个方法了 宽度 ${initialScaledWidth}");
      initialScaledWidth = initialScaledWidth + 10.0;
      print("调用这个方法了 宽度 ${initialScaledWidth}");
      initialScaledHeight = initialScaledHeight + 10.0;
    });
  }

  void _handleScale(ScaleUpdateDetails details) {
    setState(() {
      _scale = (_scale * details.scale).clamp(_minScale, _maxScale);
      // 根据缩放比例更新当前宽度和高度
      initialScaledWidth = initialScaledWidth * _scale;
      initialScaledHeight = initialScaledHeight * _scale;
    });
  }

  // 获取点位信息
  void fetchPointData(String deviceId, String locId) async {
    try {
      final response = await _dio.get(
        'https://hadoop01.rupeng119.com:8082/screen/loc-dot/list',
        queryParameters: {
          'deviceID': deviceId,
          'locId': locId,
        },
      );
      if (response.statusCode == 200) {
        print("点位接口返回的信息是 ${response.data['data']}");
        setState(() {
          pointData = response.data['data'];
        });
      } else {
        throw Exception('Failed to load points');
      }
    } catch (e) {
      print("Error fetching points: $e");
    }
  }

  //构建数据结构
  void buildDataStructure() async {
    print('哈哈哈哈哈: ${widget.rowdata}');
    // dynamic locIds = widget.rowdata['loc_ids'];
    // if (locIds is List && locIds.isNotEmpty) {
    //   dynamic firstItem = locIds[0];
    //   print('loc_ids 第一项的数据类型: ${firstItem.runtimeType}');
    //   print('loc_ids 第一项的值: $firstItem'); // 打印第一项的值
    // } else {
    //   print('loc_ids 数组为空或不是列表类型');
    // }
    // dynamic locName = widget.rowdata['locName'];
    // if (locName is List && locName.isNotEmpty) {
    //   dynamic firstItem = locName[0];
    //   print('locName 第一项的数据类型: ${firstItem.runtimeType}');
    //   print('locName 第一项的值: $firstItem'); // 打印第一项的值
    // } else {
    //   print('locName 数组为空或不是列表类型');
    // }
    dynamic locIds = widget.rowdata['loc_ids'];
    dynamic locName = widget.rowdata['locName'];

    if (locIds is List &&
        locIds.isNotEmpty &&
        locName is List &&
        locName.isNotEmpty) {
      String locId = locIds[0].toString(); // 获取 loc_ids 数组中的第一项并转换为字符串
      String name = locName[0].toString(); // 获取 locName 数组中的第一项并转换为字符串

      print('loc_ids 第一项的值: $locId');
      print('locName 第一项的值: $name');

      // 构建一级标题
      Map<String, dynamic> firstLevel = {
        'title': name,
        'info': {
          'description': '$name 的描述信息', // 示例描述
          'color': Colors.blue, // 示例颜色
        },
        'children': [],
      };

      // 请求第一个接口获取 parentId
      final parentId = await fetchParentId(locId);
      if (parentId != null) {
        print("请求二级数据的第一个接口的返回值2是：：$parentId");
        // 请求第二个接口获取二级标题数据
        List<Map<String, dynamic>> secondLevelData =
            await fetchSecondLevelData(parentId);
        print("请求二级数据的第二个接口返回的二级数据是：：$secondLevelData");
        firstLevel['children'] = secondLevelData;
        print("最终拼接的结果是：：$firstLevel");

        // debugPrint("最终拼接的结果是：：$firstLevel");
      }

      // 将一级标题添加到 apiData
      apiData.add(firstLevel);
      // data.add(firstLevel);

      // // 更新状态以重新构建界面
      setState(() {});
    } else {
      print('loc_ids 或 locName 数组为空或不是列表类型');
    }
  }

  Future<String?> fetchParentId(String locId) async {
    try {
      // 请求第一个接口
      final response = await _dio.get(
          'https://hadoop01.rupeng119.com:8082/screen/location/findFather/$locId');
      if (response.statusCode == 200) {
        print("请求二级数据的第一个接口的返回值1是：：${response.data}");
        return response.data['data']['parentId']; // 返回 parentId
      } else {
        throw Exception('Failed to load parentId');
      }
    } catch (e) {
      print("Error fetching parentId: $e");
      return null;
    }
  }

  Future<List<Map<String, dynamic>>> fetchSecondLevelData(
      String parentId) async {
    try {
      // 请求第二个接口
      final response = await _dio.get(
          'https://hadoop01.rupeng119.com:8082/screen/location/findSonById?id=$parentId');
      if (response.statusCode == 200) {
        print("请求二级数据的第二个接口返回的数据是：：${response.data['data']}");
        List<Map<String, dynamic>> secondLevel = [];
        for (var item in response.data['data']) {
          String id = item['id'].toString(); // 获取二级数据的 id 属性值
          print("传给请求第三级别数据的id是 ${id}");
          List<Map<String, dynamic>> thirdLevelData =
              await fetchThirdLevelData(id); // 请求三级数据
          print("第三级别数据 ${thirdLevelData}");
          secondLevel.add({
            'title': item['name'], // 使用 name 字段作为二级标题
            'info': {
              'description': item, // 示例描述
              'icon': Icons.folder, // 示例图标
            },
            'children': thirdLevelData, // 三级标题暂时留空
          });
        }
        return secondLevel;
      } else {
        throw Exception('Failed to load second level data');
      }
    } catch (e) {
      print("Error fetching second level data: $e");
      return [];
    }
  }

//获取三级数据
  Future<List<Map<String, dynamic>>> fetchThirdLevelData(String id) async {
    try {
      final response = await _dio.get(
          'https://hadoop01.rupeng119.com:8082/screen/location/findSonById?id=$id');
      if (response.statusCode == 200) {
        print("请求三级数据的接口返回的数据是：：${response.data['data']}");
        List<Map<String, dynamic>> thirdLevel = [];
        for (var item in response.data['data']) {
          thirdLevel.add({
            'title': item['name'], // 使用 name 字段作为三级标题
            'info': {
              'description': item, // 使用原始 description
              'icon': Icons.folder, // 示例图标
            },
            'children': [], // 暂时不包含四级标题
          });
        }
        return thirdLevel;
      } else {
        throw Exception('Failed to load third level data');
      }
    } catch (e) {
      print("Error fetching third level data: $e");
      return [];
    }
  }

  // 判断二级标签是否展开
  bool _isChildExpanded(String title) {
    return _expandedChild == title;
  }

  void updateSelectedItem(String item) {
    setState(() {
      selectedItem = item; // 更新选中的项
    });
  }

  // Widget _buildRightContent() {
  //   print('Building right content with selectedItem: $selectedItem');
  //   if (selectedDescription != null) {
  //     return FutureBuilder<ScalableImage>(
  //       future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
  //       builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
  //         if (snapshot.connectionState == ConnectionState.done) {
  //           if (snapshot.hasError) {
  //             return Text('Error loading SVG: ${snapshot.error}');
  //           }

  //           // 获取SVG图像的宽高并打印，提供默认值0.0
  //           double originalWidth = snapshot.data!.width ?? 0.0;
  //           double originalHeight = snapshot.data!.height ?? 0.0;
  //           print('SVG图像原始的宽度：$originalWidth');
  //           print('SVG图像原始的高度：$originalHeight');

  //           // 计算缩小后的宽高，缩放比例设为0.6
  //           double scaledWidth = originalWidth * 0.4;
  //           double scaledHeight = originalHeight * 0.4;
  //           print('SVG图像缩小后的宽度：$scaledWidth');
  //           print('SVG图像缩小后的高度：$scaledHeight');

  //           // 在这里处理点位信息的展示和交互逻辑
  //           return Stack(
  //             children: [
  //               //强制设置svg图的宽高
  //               SingleChildScrollView(
  //                 child: SizedBox(
  //                   width: scaledWidth,
  //                   height: scaledHeight,
  //                   child: ScalableImageWidget(
  //                     si: snapshot.data!,
  //                   ),
  //                 ),
  //               ),

  //               if (pointData.isNotEmpty)
  //                 ...pointData.map((point) {
  //                   // 根据点位信息中的坐标定位小图标位置
  //                   double x = double.tryParse(point['xaxis']) ?? 0;
  //                   double y = double.tryParse(point['yaxis']) ?? 0;
  //                   if (x != 0) {
  //                     x = x * 0.4;
  //                   }

  //                   if (y != 0) {
  //                     y = y * 0.4;
  //                   }

  //                   return Positioned(
  //                     left: x,
  //                     top: y,
  //                     child: GestureDetector(
  //                       onTap: () {
  //                         // 点击点位显示弹框，显示对应信息
  //                         showDialog(
  //                           context: context,
  //                           builder: (BuildContext context) {
  //                             return AlertDialog(
  //                               backgroundColor: Colors.red.withOpacity(0.8),
  //                               title: Text('点位信息'),
  //                               content: Column(
  //                                 mainAxisSize: MainAxisSize.min,
  //                                 children: [
  //                                   Text(
  //                                       '地址：${point['loopNum']}-${point['dotNum']}'),
  //                                   Text('类型：${point['svgType']}'),
  //                                 ],
  //                               ),
  //                             );
  //                           },
  //                         );
  //                       },
  //                       // 修正后的使用jovial_svg库展示点位图标部分
  //                       child: FutureBuilder<Widget>(
  //                         future: (() async {
  //                           ScalableImage? scalableImage;
  //                           try {
  //                             scalableImage =
  //                                 await ScalableImage.fromSvgHttpUrl(
  //                                     Uri.parse(point['svgUrl']));
  //                             return SizedBox(
  //                               width: 10,
  //                               height: 10,
  //                               child: ScalableImageWidget(
  //                                 si: scalableImage!,
  //                               ),
  //                             );
  //                           } catch (e) {
  //                             print('加载点位图标SVG出错: $e');
  //                             return SizedBox();
  //                           }
  //                         })(),
  //                         builder: (BuildContext context,
  //                             AsyncSnapshot<Widget> snapshot) {
  //                           if (snapshot.connectionState ==
  //                               ConnectionState.done) {
  //                             if (snapshot.hasError) {
  //                               return Text('加载点位图标出现错误');
  //                             }
  //                             return snapshot.data!;
  //                           }
  //                           return SizedBox();
  //                         },
  //                       ),
  //                     ),
  //                   );
  //                 }).toList()
  //             ],
  //           );
  //         } else {
  //           return CircularProgressIndicator();
  //         }
  //       },
  //     );
  //   }
  //   return Text('请选择项');
  // }

  // Widget _buildRightContent() {
  //   print('Building right content with selectedItem: $selectedItem');
  //   if (selectedDescription != null) {
  //     return FutureBuilder<ScalableImage>(
  //       future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
  //       builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
  //         if (snapshot.connectionState == ConnectionState.done) {
  //           if (snapshot.hasError) {
  //             return Text('Error loading SVG: ${snapshot.error}');
  //           }

  //           // 获取SVG图像的宽高并打印，提供默认值0.0
  //           double originalWidth = snapshot.data!.width ?? 0.0;
  //           double originalHeight = snapshot.data!.height ?? 0.0;
  //           print('SVG图像原始的宽度：$originalWidth');
  //           print('SVG图像原始的高度：$originalHeight');

  //           // 计算缩小后的宽高，缩放比例设为0.4（这里你原代码是0.4，你前面描述写的0.6，确认下正确的缩放比例）
  //           double scaledWidth = originalWidth * 0.4;
  //           double scaledHeight = originalHeight * 0.4;
  //           print('SVG图像缩小后的宽度：$scaledWidth');
  //           print('SVG图像缩小后的高度：$scaledHeight');

  //           // 创建一个ValueNotifier来管理变换矩阵，初始化为单位矩阵（无缩放、平移等变换）
  //           final ValueNotifier<Matrix4> matrixNotifier =
  //               ValueNotifier(Matrix4.identity());

  //           return Stack(
  //             children: [
  //               MatrixGestureDetector(
  //                 // 修正onMatrixUpdate回调参数，只保留必要的参数
  //                 // onMatrixUpdate: (Matrix4 matrix, Matrix4 sourceMatrix,
  //                 //     Matrix4 resetMatrix) {
  //                 //   matrixNotifier.value = matrix;
  //                 // },
  //                 onMatrixUpdate: (Matrix4 matrix, Matrix4 translationMatrix,
  //                     Matrix4 scaleMatrix, Matrix4 rotationMatrix) {
  //                   // 在这里更新 SVG 图和点位的变换矩阵
  //                   // 可以根据 matrix 中的缩放、平移等信息来更新部件的变换
  //                   // 例如，可以将 matrix 应用到 SVG 图和点位的 Transform 中
  //                   matrixNotifier.value = matrix;
  //                 },
  //                 child: AnimatedBuilder(
  //                   animation: matrixNotifier,
  //                   builder: (BuildContext context, Widget? child) {
  //                     return Transform(
  //                       transform: matrixNotifier.value,
  //                       child: SingleChildScrollView(
  //                         child: SizedBox(
  //                           width: scaledWidth,
  //                           height: scaledHeight,
  //                           child: ScalableImageWidget(
  //                             si: snapshot.data!,
  //                           ),
  //                         ),
  //                       ),
  //                     );
  //                   },
  //                 ),
  //               ),
  //               if (pointData.isNotEmpty)
  //                 ...pointData.map((point) {
  //                   // 根据点位信息中的坐标定位小图标位置
  //                   double x = double.tryParse(point['xaxis']) ?? 0;
  //                   double y = double.tryParse(point['yaxis']) ?? 0;
  //                   if (x != 0) {
  //                     x = x * 0.4;
  //                   }

  //                   if (y != 0) {
  //                     y = y * 0.4;
  //                   }

  //                   // 也要根据矩阵变化更新点位的位置，这里通过Transform包裹来应用矩阵变换
  //                   return Positioned(
  //                     left: x,
  //                     top: y,
  //                     child: Transform(
  //                       transform: matrixNotifier.value,
  //                       child: GestureDetector(
  //                         onTap: () {
  //                           // 点击点位显示弹框，显示对应信息
  //                           showDialog(
  //                             context: context,
  //                             builder: (BuildContext context) {
  //                               return AlertDialog(
  //                                 backgroundColor: Colors.red.withOpacity(0.8),
  //                                 title: Text('点位信息'),
  //                                 content: Column(
  //                                   mainAxisSize: MainAxisSize.min,
  //                                   children: [
  //                                     Text(
  //                                         '地址：${point['loopNum']}-${point['dotNum']}'),
  //                                     Text('类型：${point['svgType']}'),
  //                                   ],
  //                                 ),
  //                               );
  //                             },
  //                           );
  //                         },
  //                         // 修正后的使用jovial_svg库展示点位图标部分
  //                         // child: FutureBuilder<Widget>(
  //                         //   future: (() async {
  //                         //     ScalableImage? scalableImage;
  //                         //     try {
  //                         //       scalableImage =
  //                         //           await ScalableImage.fromSvgHttpUrl(
  //                         //               Uri.parse(point['svgUrl']));
  //                         //     return SizedBox(
  //                         //       width: 10,
  //                         //       height: 10,
  //                         //       child: ScalableImageWidget(
  //                         //         si: scalableImage!,
  //                         //       );
  //                         //     } catch (e) {
  //                         //       print('加载点位图标SVG出错: $e');
  //                         //       return SizedBox();
  //                         //     }
  //                         //   })(),
  //                         //   builder: (BuildContext context,
  //                         //       AsyncSnapshot<Widget> snapshot) {
  //                         //     if (snapshot.connectionState ==
  //                         //         ConnectionState.done) {
  //                         //       if (snapshot.hasError) {
  //                         //         return Text('加载点位图标出现错误');
  //                         //       }
  //                         //       return snapshot.data!;
  //                         //     }
  //                         //     return SizedBox();
  //                         //   },
  //                         // ),
  //                         child: FutureBuilder<Widget>(
  //                           future: (() async {
  //                             ScalableImage? scalableImage;
  //                             try {
  //                               scalableImage =
  //                                   await ScalableImage.fromSvgHttpUrl(
  //                                       Uri.parse(point['svgUrl']));
  //                               return SizedBox(
  //                                 width: 10,
  //                                 height: 10,
  //                                 child: ScalableImageWidget(
  //                                   si: scalableImage!,
  //                                 ), // 使用逗号而不是分号
  //                               );
  //                             } catch (e) {
  //                               print('加载点位图标SVG出错: $e');
  //                               return SizedBox();
  //                             }
  //                           })(),
  //                           builder: (BuildContext context,
  //                               AsyncSnapshot<Widget> snapshot) {
  //                             if (snapshot.connectionState ==
  //                                 ConnectionState.done) {
  //                               if (snapshot.hasError) {
  //                                 return Text('加载点位图标出现错误');
  //                               }
  //                               return snapshot.data!;
  //                             }
  //                             return SizedBox();
  //                           },
  //                         ),
  //                       ),
  //                     ),
  //                   );
  //                 }).toList()
  //             ],
  //           );
  //         } else {
  //           return CircularProgressIndicator();
  //         }
  //       },
  //     );
  //   }
  //   return Text('请选择项');
  // }

//   Widget _buildRightContent() {
//     print('Building right content with selectedItem: $selectedItem');
//     if (selectedDescription != null) {
//       return FutureBuilder<ScalableImage>(
//         future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
//         builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
//           if (snapshot.connectionState == ConnectionState.done) {
//             if (snapshot.hasError) {
//               return Text('Error loading SVG: ${snapshot.error}');
//             }

//             double originalWidth = snapshot.data!.width ?? 0.0;
//             double originalHeight = snapshot.data!.height ?? 0.0;
//             double scaledWidth = originalWidth * 0.4;
//             double scaledHeight = originalHeight * 0.4;

//             final ValueNotifier<Matrix4> matrixNotifier =
//                 ValueNotifier(Matrix4.identity());

//             return Stack(
//               children: [
//                 MatrixGestureDetector(
//                   onMatrixUpdate: (Matrix4 matrix, Matrix4 translationMatrix,
//                       Matrix4 scaleMatrix, Matrix4 rotationMatrix) {
//                     matrixNotifier.value = matrix;
//                   },
//                   child: AnimatedBuilder(
//                     animation: matrixNotifier,
//                     builder: (BuildContext context, Widget? child) {
//                       return Transform(
//                         transform: matrixNotifier.value,
//                         child: SingleChildScrollView(
//                           child: SizedBox(
//                             width: scaledWidth,
//                             height: scaledHeight,
//                             child: ScalableImageWidget(
//                               si: snapshot.data!,
//                             ),
//                           ),
//                         ),
//                       );
//                     },
//                   ),
//                 ),
//                 if (pointData.isNotEmpty)
//                   ...pointData.map((point) {
//                     double x = double.tryParse(point['xaxis']) ?? 0;
//                     double y = double.tryParse(point['yaxis']) ?? 0;

//                     // 计算缩放后的坐标
//                     double scaledX = x * 0.4;
//                     double scaledY = y * 0.4;

//                     // 使用矩阵变换更新点位的位置
//                     // Vector3 transformedPosition = matrixNotifier.value
//                     //     .transform3(Vector3(scaledX, scaledY, 0));

// // Vector3 transformedPosition = matrixNotifier.value.transform3(vector_math.Vector3(scaledX, scaledY, 0));
//                     vector_math.Vector3 transformedPosition = matrixNotifier
//                         .value
//                         .transform3(vector_math.Vector3(scaledX, scaledY, 0));
//                     return Positioned(
//                       left: transformedPosition.x,
//                       top: transformedPosition.y,
//                       child: GestureDetector(
//                         onTap: () {
//                           showDialog(
//                             context: context,
//                             builder: (BuildContext context) {
//                               return AlertDialog(
//                                 backgroundColor: Colors.red.withOpacity(0.8),
//                                 title: Text('点位信息'),
//                                 content: Column(
//                                   mainAxisSize: MainAxisSize.min,
//                                   children: [
//                                     Text(
//                                         '地址：${point['loopNum']}-${point['dotNum']}'),
//                                     Text('类型：${point['svgType']}'),
//                                   ],
//                                 ),
//                               );
//                             },
//                           );
//                         },
//                         child: FutureBuilder<Widget>(
//                           future: (() async {
//                             ScalableImage? scalableImage;
//                             try {
//                               scalableImage =
//                                   await ScalableImage.fromSvgHttpUrl(
//                                       Uri.parse(point['svgUrl']));
//                               return SizedBox(
//                                 width: 10,
//                                 height: 10,
//                                 child: ScalableImageWidget(
//                                   si: scalableImage!,
//                                 ),
//                               );
//                             } catch (e) {
//                               print('加载点位图标SVG出错: $e');
//                               return SizedBox();
//                             }
//                           })(),
//                           builder: (BuildContext context,
//                               AsyncSnapshot<Widget> snapshot) {
//                             if (snapshot.connectionState ==
//                                 ConnectionState.done) {
//                               if (snapshot.hasError) {
//                                 return Text('加载点位图标出现错误');
//                               }
//                               return snapshot.data!;
//                             }
//                             return SizedBox();
//                           },
//                         ),
//                       ),
//                     );
//                   }).toList()
//               ],
//             );
//           } else {
//             return CircularProgressIndicator();
//           }
//         },
//       );
//     }
//     return Text('请选择项');
//   }

  // Widget _buildRightContent() {
  //   print('Building right content with selectedItem: $selectedItem');
  //   if (selectedDescription != null) {
  //     return FutureBuilder<ScalableImage>(
  //       future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
  //       builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
  //         if (snapshot.connectionState == ConnectionState.done) {
  //           if (snapshot.hasError) {
  //             return Text('Error loading SVG: ${snapshot.error}');
  //           }

  //           // 获取SVG图像的宽高并打印，提供默认值0.0
  //           double originalWidth = snapshot.data!.width ?? 0.0;
  //           double originalHeight = snapshot.data!.height ?? 0.0;
  //           print('SVG图像原始的宽度：$originalWidth');
  //           print('SVG图像原始的高度：$originalHeight');

  //           // 计算缩小后的宽高，缩放比例设为0.4（这里你原代码是0.4，你前面描述写的0.6，确认下正确的缩放比例）
  //           double scaledWidth = originalWidth * 0.4;
  //           double scaledHeight = originalHeight * 0.4;
  //           print('SVG图像缩小后的宽度：$scaledWidth');
  //           print('SVG图像缩小后的高度：$scaledHeight');
  //           return Stack(
  //             children: [
  //               MatrixGestureDetector(
  //                 onMatrixUpdate: (Matrix4 matrix, Matrix4 translationMatrix,
  //                     Matrix4 scaleMatrix, Matrix4 rotationMatrix) {
  //                   print('MatrixGestureDetector - onMatrixUpdate triggered');
  //                   matrixNotifier.value = matrix;
  //                   isFirstLoadPointData = false; // 标记已完成首次加载
  //                 },
  //                 child: AnimatedBuilder(
  //                   animation: matrixNotifier,
  //                   builder: (BuildContext context, Widget? child) {
  //                     return Transform(
  //                       transform: matrixNotifier.value,
  //                       child: SingleChildScrollView(
  //                         child: SizedBox(
  //                           width: scaledWidth,
  //                           height: scaledHeight,
  //                           child: Stack(
  //                             children: [
  //                               // SVG 图
  //                               ScalableImageWidget(
  //                                 si: snapshot.data!,
  //                               ),
  //                               // 点位逻辑
  //                               if (pointData.isNotEmpty)
  //                                 ...pointData.map((point) {
  //                                   double x =
  //                                       double.tryParse(point['xaxis']) ?? 0;
  //                                   double y =
  //                                       double.tryParse(point['yaxis']) ?? 0;

  //                                   // x = x * 0.4;
  //                                   // y = y * 0.4;
  //                                   if (isFirstLoadPointData) {
  //                                     x = double.tryParse(point['xaxis']) ?? 0;
  //                                     y = double.tryParse(point['yaxis']) ?? 0;
  //                                     x = x * 0.4;
  //                                     y = y * 0.4;
  //                                     print("首次加载的坐标 ${x}");
  //                                   }
  //                                   // 应用变换矩阵来更新坐标
  //                                   final vector_math.Vector4 pointVector =
  //                                       vector_math.Vector4(x, y, 0, 0);
  //                                   // 使用完整的变换矩阵来变换点位坐标

  //                                   final vector_math.Vector4
  //                                       transformedVector4 = matrixNotifier
  //                                           .value
  //                                           .transform(pointVector);

  //                                   double transformedX = transformedVector4.x;
  //                                   double transformedY = transformedVector4.y;

  //                                   // 构建点位图标部分
  //                                   Widget pointIconWidget =
  //                                       _buildPointIconWidget(point);

  //                                   return Positioned(
  //                                     left: transformedX,
  //                                     top: transformedY,
  //                                     child: GestureDetector(
  //                                       onTap: () {
  //                                         // 点击点位显示弹框，显示对应信息
  //                                         showDialog(
  //                                           context: context,
  //                                           builder: (BuildContext context) {
  //                                             return AlertDialog(
  //                                               backgroundColor:
  //                                                   Colors.red.withOpacity(0.8),
  //                                               title: Text('点位信息'),
  //                                               content: Column(
  //                                                 mainAxisSize:
  //                                                     MainAxisSize.min,
  //                                                 children: [
  //                                                   Text(
  //                                                       '地址：${point['loopNum']}-${point['dotNum']}'),
  //                                                   Text(
  //                                                       '类型：${point['svgType']}'),
  //                                                 ],
  //                                               ),
  //                                             );
  //                                           },
  //                                         );
  //                                       },
  //                                       child: pointIconWidget,
  //                                     ),
  //                                   );
  //                                 }).toList(),
  //                             ],
  //                           ),
  //                         ),
  //                       ),
  //                     );
  //                   },
  //                 ),
  //               ),
  //             ],
  //           );
  //         } else {
  //           return CircularProgressIndicator();
  //         }
  //       },
  //     );
  //   }
  //   return Text('请选择项');
  // }

  // Widget _buildRightContent() {
  //   print('Building right content with selectedItem: $selectedItem');
  //   double initialScaleFactor = 0.4;
  //   if (selectedDescription != null) {
  //     return FutureBuilder<ScalableImage>(
  //       future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
  //       builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
  //         if (snapshot.connectionState == ConnectionState.done) {
  //           if (snapshot.hasError) {
  //             return Text('Error loading SVG: ${snapshot.error}');
  //           }

  //           // 获取SVG图像的宽高并打印，提供默认值0.0
  //           double originalWidth = snapshot.data!.width ?? 0.0;
  //           double originalHeight = snapshot.data!.height ?? 0.0;
  //           print('SVG图像原始的宽度：$originalWidth');
  //           print('SVG图像原始的高度：$originalHeight');

  //           // 计算缩小后的宽高，缩放比例设为0.4（这里你原代码是0.4，你前面描述写的0.6，确认下正确的缩放比例）
  //           double scaledWidth = originalWidth * initialScaleFactor;
  //           double scaledHeight = originalHeight * initialScaleFactor;
  //           print('SVG图像缩小后的宽度：$scaledWidth');
  //           print('SVG图像缩小后的高度：$scaledHeight');
  //           return Stack(
  //             children: [
  //               MatrixGestureDetector(
  //                 onMatrixUpdate: (Matrix4 matrix, Matrix4 translationMatrix,
  //                     Matrix4 scaleMatrix, Matrix4 rotationMatrix) {
  //                   print('MatrixGestureDetector - onMatrixUpdate triggered');
  //                   matrixNotifier.value = matrix;
  //                   isFirstLoadPointData = false; // 标记已完成首次加载
  //                 },
  //                 child: AnimatedBuilder(
  //                   animation: matrixNotifier,
  //                   builder: (BuildContext context, Widget? child) {
  //                     return Transform(
  //                       transform: matrixNotifier.value,
  //                       child: SingleChildScrollView(
  //                         child: SizedBox(
  //                           width: scaledWidth,
  //                           height: scaledHeight,
  //                           child: Stack(
  //                             children: [
  //                               // SVG 图
  //                               ScalableImageWidget(
  //                                 si: snapshot.data!,
  //                               ),
  //                               // 点位逻辑
  //                               if (pointData.isNotEmpty)
  //                                 ...pointData.map((point) {
  //                                   // 获取点位原始坐标并进行初始化缩放（乘以0.4）
  //                                   double x =
  //                                       (double.tryParse(point['xaxis']) ?? 0) *
  //                                           initialScaleFactor;
  //                                   double y =
  //                                       (double.tryParse(point['yaxis']) ?? 0) *
  //                                           initialScaleFactor;

  //                                   // 后续进行矩阵变换时的坐标处理逻辑
  //                                   // 先将坐标还原到原始 SVG 图对应的坐标体系（撤销初始缩放）
  //                                   double originalX = x / initialScaleFactor;
  //                                   double originalY = y / initialScaleFactor;

  //                                   // 创建用于矩阵变换的向量，使用还原后的坐标
  //                                   final vector_math.Vector4 pointVector =
  //                                       vector_math.Vector4(
  //                                           originalX, originalY, 0, 0);

  //                                   // 进行矩阵变换
  //                                   final vector_math.Vector4
  //                                       transformedVector4 = matrixNotifier
  //                                           .value
  //                                           .transform(pointVector);

  //                                   // 将变换后的坐标再按照初始缩放比例缩放到当前显示的坐标体系
  //                                   double transformedX = transformedVector4.x *
  //                                       initialScaleFactor;
  //                                   double transformedY = transformedVector4.y *
  //                                       initialScaleFactor;

  //                                   // 构建点位图标部分
  //                                   Widget pointIconWidget =
  //                                       _buildPointIconWidget(point);

  //                                   return Positioned(
  //                                     left: transformedX,
  //                                     top: transformedY,
  //                                     child: GestureDetector(
  //                                       onTap: () {
  //                                         // 点击点位显示弹框，显示对应信息
  //                                         showDialog(
  //                                           context: context,
  //                                           builder: (BuildContext context) {
  //                                             return AlertDialog(
  //                                               backgroundColor:
  //                                                   Colors.red.withOpacity(0.8),
  //                                               title: Text('点位信息'),
  //                                               content: Column(
  //                                                 mainAxisSize:
  //                                                     MainAxisSize.min,
  //                                                 children: [
  //                                                   Text(
  //                                                       '地址：${point['loopNum']}-${point['dotNum']}'),
  //                                                   Text(
  //                                                       '类型：${point['svgType']}'),
  //                                                 ],
  //                                               ),
  //                                             );
  //                                           },
  //                                         );
  //                                       },
  //                                       child: pointIconWidget,
  //                                     ),
  //                                   );
  //                                 }).toList(),
  //                             ],
  //                           ),
  //                         ),
  //                       ),
  //                     );
  //                   },
  //                 ),
  //               ),
  //             ],
  //           );
  //         } else {
  //           return CircularProgressIndicator();
  //         }
  //       },
  //     );
  //   }
  //   return Text('请选择项');
  // }
  Widget _buildRightContent() {
    print('Building right content with selectedItem: $selectedItem');
    if (selectedDescription != null) {
      return FutureBuilder<ScalableImage>(
        future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
        builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            if (snapshot.hasError) {
              return Text('Error loading SVG: ${snapshot.error}');
            }

            // 获取SVG图像的宽高并打印，提供默认值0.0
            double originalWidth = snapshot.data!.width ?? 0.0;
            double originalHeight = snapshot.data!.height ?? 0.0;
            print('SVG图像原始的宽度：$originalWidth');
            print('SVG图像原始的高度：$originalHeight');

            // 计算缩小后的宽高，缩放比例设为0.4（这里你原代码是0.4，你前面描述写的0.6，确认下正确的缩放比例）
            double scaledWidth = originalWidth * 0.4;
            double scaledHeight = originalHeight * 0.4;
            print('SVG图像缩小后的宽度：$scaledWidth');
            print('SVG图像缩小后的高度：$scaledHeight');
            return Stack(
              children: [
                MatrixGestureDetector(
                  onMatrixUpdate: (Matrix4 matrix, Matrix4 translationMatrix,
                      Matrix4 scaleMatrix, Matrix4 rotationMatrix) {
                    print('MatrixGestureDetector - onMatrixUpdate triggered');
                    print('Matrix4 Scale Matrix: $scaleMatrix');
                    matrixNotifier.value = matrix;
                    isFirstLoadPointData = false; // 标记已完成首次加载
                  },
                  child: AnimatedBuilder(
                    animation: matrixNotifier,
                    builder: (BuildContext context, Widget? child) {
                      return Transform(
                        transform: matrixNotifier.value,
                        child: SingleChildScrollView(
                          child: SizedBox(
                            width: scaledWidth,
                            height: scaledHeight,
                            child: Stack(
                              children: [
                                // SVG 图
                                ScalableImageWidget(
                                  si: snapshot.data!,
                                ),
                                // 点位逻辑
                                if (pointData.isNotEmpty)
                                  ...pointData.map((point) {
                                    double x =
                                        double.tryParse(point['xaxis']) ?? 0;
                                    double y =
                                        double.tryParse(point['yaxis']) ?? 0;

                                    x = x * 0.4;
                                    y = y * 0.4;
                                    // if (isFirstLoadPointData) {
                                    //   x = double.tryParse(point['xaxis']) ?? 0;
                                    //   y = double.tryParse(point['yaxis']) ?? 0;
                                    //   x = x * 0.4;
                                    //   y = y * 0.4;
                                    //   print("首次加载的坐标 $x, $y");
                                    // }
                                    // print("原始坐标: ($x, $y)");
                                    // 应用变换矩阵来更新坐标
                                    final vector_math.Vector4 pointVector =
                                        vector_math.Vector4(x, y, 0, 0);
                                    // 使用完整的变换矩阵来变换点位坐标

                                    final vector_math.Vector4
                                        transformedVector4 = matrixNotifier
                                            .value
                                            .transform(pointVector);
                                    print(
                                        "变换后的坐标: (${transformedVector4.x}, ${transformedVector4.y})");

                                    double transformedX = transformedVector4.x;
                                    double transformedY = transformedVector4.y;

                                    // 构建点位图标部分
                                    Widget pointIconWidget =
                                        _buildPointIconWidget(point);

                                    return Positioned(
                                      left: transformedX,
                                      top: transformedY,
                                      child: GestureDetector(
                                        onTap: () {
                                          // 点击点位显示弹框，显示对应信息
                                          showDialog(
                                            context: context,
                                            builder: (BuildContext context) {
                                              return AlertDialog(
                                                backgroundColor:
                                                    Colors.red.withOpacity(0.8),
                                                title: Text('点位信息'),
                                                content: Column(
                                                  mainAxisSize:
                                                      MainAxisSize.min,
                                                  children: [
                                                    Text(
                                                        '地址：${point['loopNum']}-${point['dotNum']}'),
                                                    Text(
                                                        '类型：${point['svgType']}'),
                                                  ],
                                                ),
                                              );
                                            },
                                          );
                                        },
                                        child: pointIconWidget,
                                      ),
                                    );
                                  }).toList(),
                              ],
                            ),
                          ),
                        ),
                      );
                    },
                  ),
                ),
              ],
            );
          } else {
            return CircularProgressIndicator();
          }
        },
      );
    }
    return Text('请选择项');
  }

  Widget _buildPointIconWidget(Map<String, dynamic> point) {
    return FutureBuilder<Widget>(
      future: _loadPointIcon(point),
      builder: (BuildContext context, AsyncSnapshot<Widget> snapshot) {
        if (snapshot.connectionState == ConnectionState.done) {
          if (snapshot.hasError) {
            return Text('加载点位图标出现错误');
          }
          return snapshot.data!;
        }
        return SizedBox();
      },
    );
  }

  Future<Widget> _loadPointIcon(Map<String, dynamic> point) async {
    try {
      ScalableImage? scalableImage =
          await ScalableImage.fromSvgHttpUrl(Uri.parse(point['svgUrl']));
      return SizedBox(
        width: 10,
        height: 10,
        child: ScalableImageWidget(
          si: scalableImage!,
        ),
      );
    } catch (e) {
      print('加载点位图标SVG出错: $e');
      return SizedBox();
    }
  }

  // Widget _buildRightContent() {
  //   // final TransformationController _transformationController =
  //   //     TransformationController();
  //   print('Building right content with selectedItem: $selectedItem');
  //   if (selectedDescription != null) {
  //     return FutureBuilder<ScalableImage>(
  //       future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
  //       builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
  //         if (snapshot.connectionState == ConnectionState.done) {
  //           if (snapshot.hasError) {
  //             return Text('Error loading SVG: ${snapshot.error}');
  //           }

  //           // 获取SVG图像的宽高并打印，提供默认值0.0
  //           double originalWidth = snapshot.data!.width ?? 0.0;
  //           double originalHeight = snapshot.data!.height ?? 0.0;
  //           print('SVG图像原始的宽度：$originalWidth');
  //           print('SVG图像原始的高度：$originalHeight');

  //           // 计算缩小后的宽高，缩放比例设为0.6
  //           // double scaledWidth = originalWidth * 0.4;
  //           // double scaledHeight = originalHeight * 0.4;
  //           // print('SVG图像缩小后的宽度：$scaledWidth');
  //           // print('SVG图像缩小后的高度：$scaledHeight');
  //           initialScaledWidth = originalWidth * 0.4;
  //           initialScaledHeight = originalHeight * 0.4;
  //           print('SVG图像缩小后的宽度：$initialScaledWidth');
  //           print('SVG图像缩小后的高度：$initialScaledHeight');

  //           // 在这里处理点位信息的展示和交互逻辑
  //           return Stack(
  //             children: [
  //               Listener(
  //                 onPointerDown: (PointerDownEvent event) {
  //                   print("Listener 组件检测到触摸按下，位置：${event.position}");
  //                 },
  //                 onPointerMove: (PointerMoveEvent event) {
  //                   print("Listener 组件检测到触摸移动，位置：${event.position}");
  //                 },
  //                 onPointerUp: (PointerUpEvent event) {
  //                   print("Listener 组件检测到触摸抬起，位置：${event.position}");
  //                 },
  //                 child: Column(
  //                   children: [
  //                     SingleChildScrollView(
  //                       physics: AlwaysScrollableScrollPhysics(),
  //                       // 添加一个变量来控制滚动是否可用
  //                       controller: ScrollController(),
  //                       child: Container(
  //                         color: Colors.grey
  //                             .withOpacity(0.3), // 设置一个半透明灰色背景，方便查看区域
  //                         child: SizedBox(
  //                           width: initialScaledWidth,
  //                           height: initialScaledHeight,
  //                           child: GestureDetector(
  //                             // 给GestureDetector设置behavior属性，先尝试HitTestBehavior.opaque
  //                             // behavior: HitTestBehavior.opaque,
  //                             behavior: HitTestBehavior.deferToChild,
  //                             // behavior: HitTestBehavior.translucent,
  //                             onTap: () {
  //                               print("检测到点击操作");
  //                             },
  //                             onScaleUpdate: (ScaleUpdateDetails details) {
  //                               print("监视到缩放操作了");
  //                               // 后续原本的缩放逻辑保持不变，暂时先注释掉，等排查完冲突问题再看是否恢复或调整
  //                               setState(() {
  //                                 // 根据缩放因子更新缩放比例
  //                                 _scale *= details.scale;
  //                                 print("缩放因子是：： ${_scale}");
  //                                 _scale = _scale.clamp(
  //                                     0.1, 3.0); // 限制缩放比例在0.1到3.0之间
  //                                 // 手动更新灰色区域容器对应的SizedBox的宽高，使其跟随缩放
  //                                 initialScaledWidth =
  //                                     initialScaledWidth * _scale;
  //                                 initialScaledHeight =
  //                                     initialScaledHeight * _scale;
  //                                 _updateSize();
  //                                 print("改变后的宽 ${initialScaledWidth}");
  //                                 print("改变后的高 ${initialScaledHeight}");
  //                                 // scaledWidth *= _scale;
  //                                 // scaledHeight *= _scale;
  //                                 // 判断是否是平移操作（通过缩放焦点是否有变化来间接判断）
  //                                 if (details.focalPoint != null) {
  //                                   // 暂时先不处理平移相关逻辑，后续再完善
  //                                   print("要平移了");
  //                                 }
  //                                 _transformationController.value =
  //                                     Matrix4.identity()..scale(_scale);
  //                               });
  //                               // setState(() {
  //                               //   // 根据缩放因子更新缩放比例
  //                               //   _scale *= details.scale;
  //                               //   _scale = _scale.clamp(0.1, 3.0); // 限制缩放比例在0.1到3.0之间
  //                               //   // 判断是否是平移操作（通过缩放焦点是否有变化来间接判断）
  //                               //   if (details.focalPoint!= null) {
  //                               //     _translateX +=
  //                               //         (details.focalPoint!.dx - (scaledWidth / 2)) *
  //                               //             (1 / details.scale);
  //                               //     _translateY +=
  //                               //         (details.focalPoint!.dy - (scaledHeight / 2)) *
  //                               //             (1 / details.scale);
  //                               //   }
  //                               //   _transformationController.value = Matrix4.identity()
  //                               //  ..scale(_scale)
  //                               //  ..translate(_translateX, _translateY);
  //                               // });
  //                             },
  //                             child: Transform(
  //                               transform: _transformationController.value,
  //                               child: ScalableImageWidget(
  //                                 si: snapshot.data!,
  //                               ),
  //                             ),
  //                           ),
  //                         ),
  //                       ),
  //                     ),
  //                   ],
  //                 ),
  //               ),
  //               if (pointData.isNotEmpty)
  //                 ...pointData.map((point) {
  //                   // 根据点位信息中的坐标定位小图标位置
  //                   double x = double.tryParse(point['xaxis']) ?? 0;
  //                   double y = double.tryParse(point['yaxis']) ?? 0;
  //                   if (x != 0) {
  //                     x = x * 0.4;
  //                   }

  //                   if (y != 0) {
  //                     y = y * 0.4;
  //                   }

  //                   // 根据SVG图的缩放和平移来更新点位坐标
  //                   double updatedX = (x * _scale) + _translateX;
  //                   double updatedY = (y * _scale) + _translateY;

  //                   return Positioned(
  //                     // left: x,
  //                     // top: y,
  //                     left: updatedX,
  //                     top: updatedY,
  //                     child: GestureDetector(
  //                       onTap: () {
  //                         // 点击点位显示弹框，显示对应信息
  //                         showDialog(
  //                           context: context,
  //                           builder: (BuildContext context) {
  //                             return AlertDialog(
  //                               backgroundColor: Colors.red.withOpacity(0.8),
  //                               title: Text('点位信息'),
  //                               content: Column(
  //                                 mainAxisSize: MainAxisSize.min,
  //                                 children: [
  //                                   Text(
  //                                       '地址：${point['loopNum']}-${point['dotNum']}'),
  //                                   Text('类型：${point['svgType']}'),
  //                                 ],
  //                               ),
  //                             );
  //                           },
  //                         );
  //                       },
  //                       // 修正后的使用jovial_svg库展示点位图标部分
  //                       child: FutureBuilder<Widget>(
  //                         future: (() async {
  //                           ScalableImage? scalableImage;
  //                           try {
  //                             scalableImage =
  //                                 await ScalableImage.fromSvgHttpUrl(
  //                                     Uri.parse(point['svgUrl']));
  //                             return SizedBox(
  //                               width: 10,
  //                               height: 10,
  //                               child: ScalableImageWidget(
  //                                 si: scalableImage!,
  //                               ),
  //                             );
  //                           } catch (e) {
  //                             print('加载点位图标SVG出错: $e');
  //                             return SizedBox();
  //                           }
  //                         })(),
  //                         builder: (BuildContext context,
  //                             AsyncSnapshot<Widget> snapshot) {
  //                           if (snapshot.connectionState ==
  //                               ConnectionState.done) {
  //                             if (snapshot.hasError) {
  //                               return Text('加载点位图标出现错误');
  //                             }
  //                             return snapshot.data!;
  //                           }
  //                           return SizedBox();
  //                         },
  //                       ),
  //                     ),
  //                   );
  //                 }).toList()
  //             ],
  //           );
  //         } else {
  //           return CircularProgressIndicator();
  //         }
  //       },
  //     );
  //   }
  //   return Text('请选择项');
  // }

  // Widget _buildRightContent() {
  //   // final TransformationController _transformationController =
  //   //     TransformationController();
  //   print('Building right content with selectedItem: $selectedItem');
  //   if (selectedDescription != null) {
  //     return FutureBuilder<ScalableImage>(
  //       future: Future.value(ScalableImage.fromSvgString(selectedDescription!)),
  //       builder: (BuildContext context, AsyncSnapshot<ScalableImage> snapshot) {
  //         if (snapshot.connectionState == ConnectionState.done) {
  //           if (snapshot.hasError) {
  //             return Text('Error loading SVG: ${snapshot.error}');
  //           }

  //           // 获取SVG图像的宽高并打印，提供默认值0.0
  //           double originalWidth = snapshot.data!.width ?? 0.0;
  //           double originalHeight = snapshot.data!.height ?? 0.0;
  //           print('SVG图像原始的宽度：$originalWidth');
  //           print('SVG图像原始的高度：$originalHeight');

  //           // 计算缩小后的宽高，缩放比例设为0.6
  //           // double scaledWidth = originalWidth * 0.4;
  //           // double scaledHeight = originalHeight * 0.4;
  //           // print('SVG图像缩小后的宽度：$scaledWidth');
  //           // print('SVG图像缩小后的高度：$scaledHeight');
  //           initialScaledWidth = originalWidth * 0.4;
  //           initialScaledHeight = originalHeight * 0.4;
  //           print('SVG图像缩小后的宽度：$initialScaledWidth');
  //           print('SVG图像缩小后的高度：$initialScaledHeight');

  //           // 在这里处理点位信息的展示和交互逻辑
  //           return Stack(
  //             children: [
  //               Listener(
  //                 onPointerDown: (PointerDownEvent event) {
  //                   print("Listener 组件检测到触摸按下，位置：${event.position}");
  //                 },
  //                 onPointerMove: (PointerMoveEvent event) {
  //                   print("Listener 组件检测到触摸移动，位置：${event.position}");
  //                 },
  //                 onPointerUp: (PointerUpEvent event) {
  //                   print("Listener 组件检测到触摸抬起，位置：${event.position}");
  //                 },
  //                 child: Column(
  //                   children: [
  //                     SingleChildScrollView(
  //                       scrollDirection: Axis.vertical,
  //                       child: Column(
  //                         children: <Widget>[
  //                           SizedBox(
  //                             // 设置动态改变的宽高
  //                             width: initialScaledWidth,
  //                             height: initialScaledHeight,
  //                             child: Container(
  //                               color: Colors.blue,
  //                               // 只是为了展示内容，可以放置任何Widget
  //                               // child: Center(child: Text('SizedBox')),
  //                               child: GestureDetector(
  //                                 // 给GestureDetector设置behavior属性，先尝试HitTestBehavior.opaque
  //                                 // behavior: HitTestBehavior.opaque,
  //                                 behavior: HitTestBehavior.deferToChild,
  //                                 // behavior: HitTestBehavior.translucent,
  //                                 onTap: () {
  //                                   print("检测到点击操作");
  //                                 },
  //                                 onScaleUpdate: (ScaleUpdateDetails details) {
  //                                   print("监视到缩放操作了");
  //                                   // 后续原本的缩放逻辑保持不变，暂时先注释掉，等排查完冲突问题再看是否恢复或调整
  //                                   setState(() {
  //                                     // 根据缩放因子更新缩放比例
  //                                     _scale *= details.scale;
  //                                     print("缩放因子是：： ${_scale}");
  //                                     _scale = _scale.clamp(
  //                                         0.1, 3.0); // 限制缩放比例在0.1到3.0之间
  //                                     // 手动更新灰色区域容器对应的SizedBox的宽高，使其跟随缩放
  //                                     initialScaledWidth =
  //                                         initialScaledWidth * _scale;
  //                                     initialScaledHeight =
  //                                         initialScaledHeight * _scale;
  //                                     _updateSize();
  //                                     print("改变后的宽 ${initialScaledWidth}");
  //                                     print("改变后的高 ${initialScaledHeight}");
  //                                     // scaledWidth *= _scale;
  //                                     // scaledHeight *= _scale;
  //                                     // 判断是否是平移操作（通过缩放焦点是否有变化来间接判断）
  //                                     if (details.focalPoint != null) {
  //                                       // 暂时先不处理平移相关逻辑，后续再完善
  //                                       print("要平移了");
  //                                     }
  //                                     _transformationController.value =
  //                                         Matrix4.identity()..scale(_scale);
  //                                   });
  //                                   // setState(() {
  //                                   //   // 根据缩放因子更新缩放比例
  //                                   //   _scale *= details.scale;
  //                                   //   _scale = _scale.clamp(0.1, 3.0); // 限制缩放比例在0.1到3.0之间
  //                                   //   // 判断是否是平移操作（通过缩放焦点是否有变化来间接判断）
  //                                   //   if (details.focalPoint!= null) {
  //                                   //     _translateX +=
  //                                   //         (details.focalPoint!.dx - (scaledWidth / 2)) *
  //                                   //             (1 / details.scale);
  //                                   //     _translateY +=
  //                                   //         (details.focalPoint!.dy - (scaledHeight / 2)) *
  //                                   //             (1 / details.scale);
  //                                   //   }
  //                                   //   _transformationController.value = Matrix4.identity()
  //                                   //  ..scale(_scale)
  //                                   //  ..translate(_translateX, _translateY);
  //                                   // });
  //                                 },
  //                                 child: Transform(
  //                                   transform: _transformationController.value,
  //                                   child: ScalableImageWidget(
  //                                     si: snapshot.data!,
  //                                   ),
  //                                 ),
  //                               ),
  //                             ),
  //                           ),
  //                         ],
  //                       ),
  //                     ),
  //                   ],
  //                 ),
  //               ),
  //               if (pointData.isNotEmpty)
  //                 ...pointData.map((point) {
  //                   // 根据点位信息中的坐标定位小图标位置
  //                   double x = double.tryParse(point['xaxis']) ?? 0;
  //                   double y = double.tryParse(point['yaxis']) ?? 0;
  //                   if (x != 0) {
  //                     x = x * 0.4;
  //                   }

  //                   if (y != 0) {
  //                     y = y * 0.4;
  //                   }

  //                   // 根据SVG图的缩放和平移来更新点位坐标
  //                   double updatedX = (x * _scale) + _translateX;
  //                   double updatedY = (y * _scale) + _translateY;

  //                   return Positioned(
  //                     // left: x,
  //                     // top: y,
  //                     left: updatedX,
  //                     top: updatedY,
  //                     child: GestureDetector(
  //                       onTap: () {
  //                         // 点击点位显示弹框，显示对应信息
  //                         showDialog(
  //                           context: context,
  //                           builder: (BuildContext context) {
  //                             return AlertDialog(
  //                               backgroundColor: Colors.red.withOpacity(0.8),
  //                               title: Text('点位信息'),
  //                               content: Column(
  //                                 mainAxisSize: MainAxisSize.min,
  //                                 children: [
  //                                   Text(
  //                                       '地址：${point['loopNum']}-${point['dotNum']}'),
  //                                   Text('类型：${point['svgType']}'),
  //                                 ],
  //                               ),
  //                             );
  //                           },
  //                         );
  //                       },
  //                       // 修正后的使用jovial_svg库展示点位图标部分
  //                       child: FutureBuilder<Widget>(
  //                         future: (() async {
  //                           ScalableImage? scalableImage;
  //                           try {
  //                             scalableImage =
  //                                 await ScalableImage.fromSvgHttpUrl(
  //                                     Uri.parse(point['svgUrl']));
  //                             return SizedBox(
  //                               width: 10,
  //                               height: 10,
  //                               child: ScalableImageWidget(
  //                                 si: scalableImage!,
  //                               ),
  //                             );
  //                           } catch (e) {
  //                             print('加载点位图标SVG出错: $e');
  //                             return SizedBox();
  //                           }
  //                         })(),
  //                         builder: (BuildContext context,
  //                             AsyncSnapshot<Widget> snapshot) {
  //                           if (snapshot.connectionState ==
  //                               ConnectionState.done) {
  //                             if (snapshot.hasError) {
  //                               return Text('加载点位图标出现错误');
  //                             }
  //                             return snapshot.data!;
  //                           }
  //                           return SizedBox();
  //                         },
  //                       ),
  //                     ),
  //                   );
  //                 }).toList()
  //             ],
  //           );
  //         } else {
  //           return CircularProgressIndicator();
  //         }
  //       },
  //     );
  //   }
  //   return Text('请选择项');
  // }

  @override
  // Widget build(BuildContext context) {
  //   // 原有的 build 方法保持不变
  // }
  Widget build(BuildContext context) {
    // 打印传递过来的参数
    print("Device:  ${widget.device}");
    print("SFS Item: ${widget.sfsItem}");
    print('Row 数据: ${widget.rowdata}');
    // String selectedItem = '';

    // 示例数据
    // final List<Map<String, dynamic>> data = [
    //   {
    //     'title': '一级标题 1',
    //     'children': [
    //       {
    //         'title': '二级标题 1-1',
    //         'children': ['三级标题 1-1-1', '三级标题 1-1-2'],
    //       },
    //       {
    //         'title': '二级标题 1-2',
    //         'children': ['三级标题 1-2-1', '三级标题 1-2-2'],
    //       },
    //     ],
    //   },
    //   {
    //     'title': '一级标题 2',
    //     'children': [
    //       {
    //         'title': '二级标题 2-1',
    //         'children': ['三级标题 2-1-1', '三级标题 2-1-2'],
    //       },
    //     ],
    //   },
    // ];

    // 测试示例数据2
    // final List<Map<String, dynamic>> data = [
    //   {
    //     'title': '一级标题 1',
    //     'info': {
    //       'description': '一级标题 1 的描述信息',
    //       'color': Colors.blue, // 例如，颜色信息
    //     },
    //     'children': [
    //       {
    //         'title': '二级标题 1-1',
    //         'info': {
    //           'description': '二级标题 1-1 的描述信息',
    //           'icon': Icons.home, // 例如，图标信息
    //         },
    //         'children': [
    //           {
    //             'title': '三级标题 1-1-1',
    //             'info': {
    //               'description': '三级标题 1-1-1 的描述信息',
    //               'icon': Icons.star, // 例如，图标信息
    //             },
    //             'children': [], // 如果没有子项，可以留空
    //           },
    //           {
    //             'title': '三级标题 1-1-2',
    //             'info': {
    //               'description': '三级标题 1-1-2 的描述信息',
    //               'icon': Icons.star_border, // 例如，图标信息
    //             },
    //             'children': [],
    //           },
    //         ],
    //       },
    //       {
    //         'title': '二级标题 1-2',
    //         'info': {
    //           'description': '二级标题 1-2 的描述信息',
    //           'icon': Icons.work, // 例如，图标信息
    //         },
    //         'children': [
    //           {
    //             'title': '三级标题 1-2-1',
    //             'info': {
    //               'description': '三级标题 1-2-1 的描述信息',
    //               'icon': Icons.access_alarm, // 例如，图标信息
    //             },
    //             'children': [],
    //           },
    //           {
    //             'title': '三级标题 1-2-2',
    //             'info': {
    //               'description': '三级标题 1-2-2 的描述信息',
    //               'icon': Icons.accessibility, // 例如，图标信息
    //             },
    //             'children': [],
    //           },
    //         ],
    //       },
    //     ],
    //   },
    //   {
    //     'title': '一级标题 2',
    //     'info': {
    //       'description': '一级标题 2 的描述信息',
    //       'color': Colors.green, // 例如，颜色信息
    //     },
    //     'children': [
    //       {
    //         'title': '二级标题 2-1',
    //         'info': {
    //           'description': '二级标题 2-1 的描述信息',
    //           'icon': Icons.school, // 例如，图标信息
    //         },
    //         'children': [
    //           {
    //             'title': '三级标题 2-1-1',
    //             'info': {
    //               'description': '三级标题 2-1-1 的描述信息',
    //               'icon': Icons.assignment, // 例如，图标信息
    //             },
    //             'children': [],
    //           },
    //           {
    //             'title': '三级标题 2-1-2',
    //             'info': {
    //               'description': '三级标题 2-1-2 的描述信息',
    //               'icon': Icons.assignment_turned_in, // 例如，图标信息
    //             },
    //             'children': [],
    //           },
    //         ],
    //       },
    //     ],
    //   },
    // ];
    List<Map<String, dynamic>> data = apiData;

    // return Scaffold(
    //   body: Column(
    //     children: [
    //       Container(
    //         height: MediaQuery.of(context).size.height * 0.2, // 上部分占页面高度的十分之二
    //         color: Color(0xFFECE9EF), // 上部分背景颜色
    //         child: Column(
    //           mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
    //           children: [
    //             // 第一行内容
    //             Center(
    //               child: Container(
    //                 width: MediaQuery.of(context).size.width *
    //                     0.95, // 容器宽度为上面区域宽度的95%
    //                 height: 51,
    //                 decoration: BoxDecoration(
    //                   boxShadow: [
    //                     BoxShadow(
    //                       color: Color(0xFF644379),
    //                       blurRadius: 5,
    //                       offset: Offset(0, 0), // 0 0px 5px
    //                     ),
    //                   ],
    //                   borderRadius: BorderRadius.circular(10),
    //                   color: Color(0xFFC4BCCB), // 容器背景颜色
    //                 ),
    //                 child: Row(
    //                   mainAxisAlignment:
    //                       MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
    //                   crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中
    //                   children: [
    //                     // 第一组数据
    //                     Container(
    //                       alignment: Alignment.centerLeft,
    //                       padding:
    //                           EdgeInsets.symmetric(horizontal: 30), // 左右内边距
    //                       height: 60, // 设置高度以便于垂直居中
    //                       decoration: BoxDecoration(
    //                         borderRadius: BorderRadius.circular(10),
    //                         gradient: LinearGradient(
    //                           colors: [
    //                             Color(0xFFA94FAE),
    //                             Color(0xFF644379),
    //                           ],
    //                           begin: Alignment.centerLeft,
    //                           end: Alignment.centerRight,
    //                         ),
    //                         boxShadow: [
    //                           BoxShadow(
    //                             color: Color(0xFF644379),
    //                             blurRadius: 5,
    //                             offset: Offset(0, 0), // 0 0px 5px
    //                           ),
    //                         ],
    //                       ),
    //                       child: Text(
    //                         '${sfsItem?['园区']} ${sfsItem?['覆盖厂房']}',
    //                         style: TextStyle(
    //                           fontSize: 22, // 字体大小
    //                           color: Colors.white, // 字体颜色
    //                           height: 1.0, // 行高
    //                         ),
    //                       ),
    //                     ),
    //                     // 第二组数据
    //                     Container(
    //                       alignment: Alignment.center,
    //                       child: Column(
    //                         crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
    //                         mainAxisAlignment: MainAxisAlignment.center,
    //                         children: [
    //                           Text(
    //                             '主机型号: ${sfsItem?['主机型号']}',
    //                             style: TextStyle(fontSize: 16),
    //                           ),
    //                           Text(
    //                             '主机位置: ${sfsItem?['主机位置']}',
    //                             style: TextStyle(fontSize: 16),
    //                           ),
    //                         ],
    //                       ),
    //                     ),
    //                     // 第三组数据
    //                     Container(
    //                       alignment: Alignment.center,
    //                       child: Column(
    //                         crossAxisAlignment: CrossAxisAlignment.start, // 左对齐
    //                         mainAxisAlignment: MainAxisAlignment.center,
    //                         children: [
    //                           Text(
    //                             '备注: ${sfsItem?['备注']}',
    //                             style: TextStyle(fontSize: 16),
    //                           ),
    //                           Text(
    //                             '批次: ${sfsItem?['批次']}',
    //                             style: TextStyle(fontSize: 16),
    //                           ),
    //                         ],
    //                       ),
    //                     ),
    //                     // 第四组数据（返回按钮）
    //                     GestureDetector(
    //                       onTap: () {
    //                         Navigator.pop(context); // 点击图片返回上一个页面
    //                       },
    //                       child: Container(
    //                         width: 40,
    //                         height: 40,
    //                         decoration: BoxDecoration(
    //                           image: DecorationImage(
    //                             image: AssetImage(
    //                                 'assets/home.png'), // 替换为你的返回图标路径
    //                             fit: BoxFit.cover,
    //                           ),
    //                         ),
    //                       ),
    //                     ),
    //                   ],
    //                 ),
    //               ),
    //             ),
    //             SizedBox(height: 14), // 添加间隔，高度为10
    //             // 第二行内容
    //             Container(
    //               width: MediaQuery.of(context).size.width *
    //                   0.95, // 容器宽度为上面区域宽度的95%
    //               padding: EdgeInsets.symmetric(vertical: 10), // 上下内边距
    //               child: Row(
    //                 mainAxisAlignment:
    //                     MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
    //                 children: [
    //                   // 新增的七组数据
    //                   _buildDataBox(
    //                       '设备ID', device['deviceId'], Color(0xFF1890FF)),
    //                   _buildDataBox('SN', device['sn'], Color(0xFF1890FF)),
    //                   _buildStatusBox('状态', device['status']),
    //                   _buildPortBox('串口状态', device['port']),
    //                   _buildActionButton('获取APP版本', () {
    //                     // 获取APP版本的功能
    //                     sendMessage(device['sn'], 'GetVersion');
    //                   }),
    //                   _buildActionButton('更新APP', () {
    //                     // 更新APP的功能
    //                     sendMessage(device['sn'], 'UpdateAPP');
    //                   }),
    //                   _buildActionButton('重新启动', () {
    //                     // 重新启动的功能
    //                     sendMessage(device['sn'], 'Restart');
    //                   }),
    //                 ],
    //               ),
    //             ),
    //           ],
    //         ),
    //       ),
    //       // Container(
    //       //   height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
    //       //   color: Colors.white, // 下部分背景颜色
    //       //   child: Center(
    //       //     child: Text(
    //       //       '设备详情内容',
    //       //       style: TextStyle(fontSize: 18),
    //       //     ),
    //       //   ),
    //       // ),
    //       // Container(
    //       //   height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
    //       //   color: Colors.white, // 下部分背景颜色
    //       //   child: Center(
    //       //     child: SvgPicture.asset(
    //       //       'assets/2# 5#.svg', // 替换为你的SVG图像路径
    //       //       height: 200, // 设置SVG图像高度
    //       //       width: 200, // 设置SVG图像宽度
    //       //       fit: BoxFit.contain, // 适应容器
    //       //     ),
    //       //   ),
    //       // ),
    //       Container(
    //         height: MediaQuery.of(context).size.height * 0.8, // 下部分占页面剩余的十分之八
    //         color: Colors.white, // 下部分背景颜色
    //         child: Center(
    //           child: SvgPicture.asset(
    //             'test9.svg', // 替换为你的SVG图像路径
    //             height: 600, // 设置SVG图像高度
    //             width: 600, // 设置SVG图像宽度
    //             // fit: BoxFit.contain, // 适应容器
    //           ),
    //         ),
    //       ),
    //     ],
    //   ),
    // );

    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height:
                    MediaQuery.of(context).size.height * 0.3, // 上部分占页面高度的十分之二
                color: Color(0xFFECE9EF), // 上部分背景颜色
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center, // 垂直居中
                  children: [
                    // 第一行内容
                    Center(
                      child: Container(
                        width: MediaQuery.of(context).size.width *
                            0.95, // 容器宽度为上面区域宽度的95%
                        height: 51,
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Color(0xFF644379),
                              blurRadius: 5,
                              offset: Offset(0, 0), // 0 0px 5px
                            ),
                          ],
                          borderRadius: BorderRadius.circular(10),
                          color: Color(0xFFC4BCCB), // 容器背景颜色
                        ),
                        child: Row(
                          mainAxisAlignment:
                              MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
                          crossAxisAlignment: CrossAxisAlignment.center, // 垂直居中
                          children: [
                            // 第一组数据
                            Container(
                              alignment: Alignment.centerLeft,
                              padding:
                                  EdgeInsets.symmetric(horizontal: 30), // 左右内边距
                              height: 60, // 设置高度以便于垂直居中
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(10),
                                gradient: LinearGradient(
                                  colors: [
                                    Color(0xFFA94FAE),
                                    Color(0xFF644379),
                                  ],
                                  begin: Alignment.centerLeft,
                                  end: Alignment.centerRight,
                                ),
                                boxShadow: [
                                  BoxShadow(
                                    color: Color(0xFF644379),
                                    blurRadius: 5,
                                    offset: Offset(0, 0), // 0 0px 5px
                                  ),
                                ],
                              ),
                              child: Text(
                                '${widget.sfsItem?['园区']} ${widget.sfsItem?['覆盖厂房']}',
                                style: TextStyle(
                                  fontSize: 22, // 字体大小
                                  color: Colors.white, // 字体颜色
                                  height: 1.0, // 行高
                                ),
                              ),
                            ),
                            // 第二组数据
                            Container(
                              alignment: Alignment.center,
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start, // 左对齐
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    '主机型号: ${widget.sfsItem?['主机型号']}',
                                    style: TextStyle(fontSize: 16),
                                  ),
                                  Text(
                                    '主机位置: ${widget.sfsItem?['主机位置']}',
                                    style: TextStyle(fontSize: 16),
                                  ),
                                ],
                              ),
                            ),
                            // 第三组数据
                            Container(
                              alignment: Alignment.center,
                              child: Column(
                                crossAxisAlignment:
                                    CrossAxisAlignment.start, // 左对齐
                                mainAxisAlignment: MainAxisAlignment.center,
                                children: [
                                  Text(
                                    '备注: ${widget.sfsItem?['备注']}',
                                    style: TextStyle(fontSize: 16),
                                  ),
                                  Text(
                                    '批次: ${widget.sfsItem?['批次']}',
                                    style: TextStyle(fontSize: 16),
                                  ),
                                ],
                              ),
                            ),
                            // 第四组数据（返回按钮）
                            GestureDetector(
                              onTap: () {
                                Navigator.pop(context); // 点击图片返回上一个页面
                              },
                              child: Container(
                                width: 40,
                                height: 40,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage(
                                        'assets/home.png'), // 替换为你的返回图标路径
                                    fit: BoxFit.cover,
                                  ),
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                    ),
                    SizedBox(height: 14), // 添加间隔，高度为10
                    // 第二行内容
                    Container(
                      width: MediaQuery.of(context).size.width *
                          0.95, // 容器宽度为上面区域宽度的95%
                      padding: EdgeInsets.symmetric(vertical: 10), // 上下内边距
                      child: Row(
                        mainAxisAlignment:
                            MainAxisAlignment.spaceBetween, // 水平排列并均匀分布
                        children: [
                          // 新增的七组数据
                          _buildDataBox('设备ID', widget.device['deviceId'],
                              Color(0xFF1890FF)),
                          _buildDataBox(
                              'SN', widget.device['sn'], Color(0xFF1890FF)),
                          _buildStatusBox('状态', widget.device['status']),
                          _buildPortBox('串口状态', widget.device['port']),
                          _buildActionButton('获取APP版本', () {
                            // 获取APP版本的功能
                            widget.sendMessage(
                                widget.device['sn'], 'GetVersion');
                          }),
                          _buildActionButton('更新APP', () {
                            // 更新APP的功能
                            widget.sendMessage(
                                widget.device['sn'], 'UpdateAPP');
                          }),
                          _buildActionButton('重新启动', () {
                            // 重新启动的功能
                            widget.sendMessage(widget.device['sn'], 'Restart');
                          }),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Container(
                height:
                    MediaQuery.of(context).size.height * 0.7, // 下部分占页面剩余的十分之八
                color: Colors.white, // 下部分背景颜色
                child: Row(
                  children: [
                    // 左边区域
                    Expanded(
                      flex: 3,
                      child: ListView.builder(
                        itemCount: data.length,
                        itemBuilder: (context, index) {
                          return ExpansionTile(
                            key: Key('parentTile_$index'), // 添加唯一key
                            title: Text(data[index]['title']),
                            children: (data[index]['children'] as List)
                                .map<Widget>((child) {
                              return ExpansionTile(
                                key: Key(
                                    'childTile_${child.hashCode}'), // 添加唯一key
                                title: Text(child['title']),
                                initiallyExpanded:
                                    _isChildExpanded(child['title']), // 判断是否展开
                                onExpansionChanged: (bool isExpanded) {
                                  if (isExpanded) {
                                    setState(() {
                                      _expandedChild =
                                          child['title']; // 更新展开的二级标签
                                    });
                                  }
                                },
                                children: (child['children'] as List)
                                    .map<Widget>((subChild) {
                                  return ListTile(
                                    key: Key(
                                        'subChildTile_${subChild.hashCode}'), // 添加唯一key
                                    // title: Text(subChild),
                                    // onTap: () {
                                    //   print('点击的是：$subChild'); // 打印点击的项
                                    //   setState(() {
                                    //     print('进来了');
                                    //     selectedItem = subChild; // 更新选中的项
                                    //   });
                                    // },
                                    title: Text(subChild['title']),
                                    onTap: () {
                                      print(
                                          '点击的是：${subChild['title']}'); // 打印点击的项
                                      // print(
                                      //     '点击项的图片信息是：${subChild['info'].description}'); // 打印点击的项
                                      // print(
                                      //     '点击项的图片信息是：${subChild['info']['description'].spare1}');
                                      print(
                                          '点击项的图片信息是：${subChild['info']['description']['spare1']}');
                                      setState(() {
                                        selectedItem =
                                            subChild['title']; // 更新选中的项
                                        // selectedDescription = subChild['info']
                                        //     ['description']; // 更新描述信息
                                        selectedDescription = subChild['info']
                                            ['description']['spare1']; // 更新描述信息
                                      });
                                      // 获取用于接口请求的deviceId和locId参数值
                                      String deviceId =
                                          widget.sfsItem?['ID']?.toString() ??
                                              '';
                                      String locId = subChild['info']
                                              ['description']['id']
                                          .toString();
                                      // 打印获取到的deviceId和locId的值
                                      print('取点位需要的deviceId的值为: $deviceId');
                                      print('取点位需要的locId的值为: $locId');
                                      // 调用fetchPointData方法获取点位信息
                                      fetchPointData(deviceId, locId);
                                    },
                                  );
                                }).toList(),
                              );
                            }).toList(),
                          );
                        },
                      ),
                    ),
                    // 右边区域
                    // Expanded(
                    //   flex: 7,
                    //   child: Container(
                    //     color: Colors.white,
                    //     child: Center(
                    //       child: Text(
                    //         selectedItem.isNotEmpty ? selectedItem : '请选择项',
                    //         style: TextStyle(fontSize: 20),
                    //       ),
                    //     ),
                    //   ),
                    // ),
                    // 右边区域
                    Expanded(
                      flex: 7,
                      child: _buildRightContent(),
                    ),
                    // 右边区域
                    // Expanded(
                    //   flex: 7,
                    //   child: Container(
                    //     color: Colors.black, // 将背景颜色设置为黑色
                    //     child: _buildRightContent(),
                    //   ),
                    // ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 构建数据框、状态框、串口状态框和操作按钮的方法保持不变
  // 构建数据框
  Widget _buildDataBox(String title, String? value, Color backgroundColor) {
    return Column(
      children: [
        Text(
          title,
          style: TextStyle(fontSize: 16),
        ),
        Container(
          // width: 60,
          constraints: BoxConstraints(
            minWidth: 60, // 设置最小宽度为60
          ),
          // padding: EdgeInsets.symmetric(vertical: 20),//设置上下padding
          padding: EdgeInsets.all(8), // 设置上下左右的padding为10
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(16),
          ),
          child: Center(
            child: Text(
              value ?? '',
              style: TextStyle(fontSize: 16, color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }

  // 构建状态框
  Widget _buildStatusBox(String title, String status) {
    Color backgroundColor = status == 'online' ? Color(0xFFffaa00) : Colors.red;
    String displayStatus = status == 'online' ? '在线' : '离线';

    return Column(
      children: [
        Text(
          title,
          style: TextStyle(fontSize: 16),
        ),
        Container(
          width: 60,
          padding: EdgeInsets.symmetric(vertical: 5),
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(14),
          ),
          child: Center(
            child: Text(
              displayStatus,
              style: TextStyle(fontSize: 16, color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }

  // 构建串口状态框
  Widget _buildPortBox(String title, String portStatus) {
    Color backgroundColor =
        portStatus == 'true' ? Color(0xFFffaa00) : Colors.red;
    String displayPort = portStatus == 'true' ? '正常' : '异常';

    return Column(
      children: [
        Text(
          title,
          style: TextStyle(fontSize: 16),
        ),
        Container(
          width: 60,
          padding: EdgeInsets.symmetric(vertical: 5),
          decoration: BoxDecoration(
            color: backgroundColor,
            borderRadius: BorderRadius.circular(14),
          ),
          child: Center(
            child: Text(
              displayPort,
              style: TextStyle(fontSize: 16, color: Colors.white),
            ),
          ),
        ),
      ],
    );
  }

  // 构建操作按钮
  Widget _buildActionButton(String title, VoidCallback onPressed) {
    return ElevatedButton(
      onPressed: onPressed,
      style: ElevatedButton.styleFrom(
        backgroundColor: Color(0xFF1890FF), // 设置背景颜色
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(14),
        ),
      ),
      child: Container(
        // width: 60,
        constraints: BoxConstraints(
          minWidth: 60, // 设置最小宽度为60
        ),
        padding: EdgeInsets.symmetric(vertical: 5),
        child: Center(
          child: Text(
            title,
            style: TextStyle(fontSize: 16, color: Colors.white),
          ),
        ),
      ),
    );
  }
}
